nodejs之gulp自动化构建工具

 Gulp是一个构建系统，它能通过自动执行常见任务，比如编译预处理CSS，压缩JavaScript和刷新浏览器，来改进网站开发的过程。
 Gulp是基于Node.js构建的，因此Gulp源文件和你用来定义任务的Gulp文件都被写进了JavaScript（或者CoffeeScript）里。
 Gulp是一个可以在GitHub上找到的开源项目。
 Gulp本身虽然不能完成很多任务，但它有大量插件可用，开发者可以访问插件页面或者在npm搜索gulpplugin就能看到。

安装Gulp的过程十分简单。首先，需要在全局安装Gulp包：

npm install -g gulp

然后，在项目里面安装Gulp：

npm install --save-dev gulp

一、使用要点

1、Gulp是基于Node.js构建的，需要先安装好nodejs;

2、首先创建一个名为gulpfile.js的文件，这是定义Gulp任务的地方，它可以通过gulp命令来运行

二、常用方法

1、gulp.task()定义任务

1.1、gulp.task()函数通常会被用来定义任务。当你定义一个简单的任务时，需要传入任务名字和执行函数两个属性。

gulp.task('greet', function () {
   console.log('Hello world!');
});

执行gulp greet的结果就是在控制台上打印出“Hello world”.

1.2、一个任务有时也可以是一系列任务。假设要定义一个任务build来执行css、js、imgs这三个任务，我们可以通过指定一个任务数组而不是函数来完成。

gulp.task('build', ['css', 'js', 'imgs']);

这些任务不是同时进行的，所以你不能认为在js任务开始的时候css任务已经结束了，也可能还没有结束。为了确保一个任务在另一个任务执行前已经结束，可以将函数和任务数组结合起来指定其依赖关系。例如，定义一个css任务，在执行前需要检查greet任务是否已经执行完毕，这样做就是可行的:

gulp.task('css', ['greet'], function () {
   // Deal with CSS here
});

现在，当执行css任务时，Gulp会先 执行greet任务，然后在它结束后再调用你定义的函数。

2、gulp.src()

gulp.src()方法输入一个glob(比如匹配一个或多个文件的字符串)或者glob数组，然后返回一个可以传递给插件的数据流。

return gulp.src('src/styles/main.scss')

3、引入组件

Gulp上有超过600种插件供你选择，你可以在插件页面或者npm上搜索gulpplugin来浏览插件列表。以下介绍常用插件：
3.1、引入gulp组建

var gulp = require('gulp'); 

3.2、gulp-uglify 文件压缩

var uglify = require('gulp-uglify');

3.3、gulp-less 编译less文件

var less = require('gulp-less');

3.4、gulp-jshint 拼接及缩小化JavaScript

var jshint = require('gulp-jshint');

4、gulp内置任务

4.1、‘default’任务， 默认会执行的任务

gulp.task('default',['css', 'imgs', 'html', 'tmod','js','font']);

4.2、gulp.watch() 监听事件

gulp.task('watchCss', function () {
    gulp.watch(['./gulp_js/css/**'], ['css']); /**监听gulp_js/css/下所以有的css文件**/
});
gulp.task('watch',['watchCss, 'watchImgs', 'watchHtml', 'watchTmod','watchJs']);
/**添加监听任务组建*/  

4.3、gulp.pipe();

使用pipe()来串流来源档案到某个插件。

var gulp = require('gulp'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat');

gulp.task('js', function () {
   return gulp.src('js/*.js')
      .pipe(jshint())  
      .pipe(jshint.reporter('default'))
      .pipe(uglify())     /**压缩代码**/
      .pipe(concat('app.js')) /**将所有文件合并到一个叫app.js的文件中**/
      .pipe(gulp.dest('build'));
});

程序中JSHint插件执行了2次，这是因为第一次执行JSHint只是给文件对象附加了jshint属性，并没有输出。

4.4、gulp.dest()

设定目的路径。一个任务可以有多个目的地。案例：如上

4.5、gulp.dest()

设定目的路径。一个任务可以有多个目的地。案例：如上