gulp自动化构建工具

发表于   |  

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。通过本文，我们将学习如何使用Gulp来改变开发流程，从而使开发更加快速高效。

gulp安装

安装nodeJS

gulp是基于nodeJS的，所以安装gulp之前要先安装nodeJS;

进入nodejs官网，点击Download按钮，就可以安装nodejs了。nodejs安装完成后，nodejs的包管理器npm，用于node插件管理(包括安装、卸载、管理依赖);

  1. 安装全局gulp：2bash 
    1
    $npm install --global gulp

  1. 新建项目后，进入项目，运行：

    1
    $npm init

  2. 在项目根目录下创建一个名为gulpfile.js 的文件：

    1
    2
    3
    4
    var gulp = require('gulp');<br/>
    gulp.task('default',function(){
    	// 将你的默认的任务代码放到这里面
    });

  3. 运行gulp:

    1
    $ gulp
默认的名为default的任务(task)将会被执行，在这里，这个任务并未做任何事情。

想要单独执行特定的任务(task),请输入`gulp 任务名`