gulp的基础语法

参考：
1. gulp的api
2. gulp的常用插件
3. gulp的知识汇总

基础用法

如何使用？

1. 加入gulp的依赖
2. 创建gulpfile.js配置文件,默认路径在当前项目根目录下。
3. 编写任务,gulp.task(...);
   • gulp.src（）：查找对应规则的文件作为入参,返回读取到的文件流
   • pip(fn)：管道进入插件方法，入sass()，uglify()等，返回还是stream流，可继续pip()
   • gulp.dest(path)：输出到path路径的文件中
4. 执行gulp的任务-命令行中输入gulp [taskname]

文档详解说明

异步任务的支持

1. 接受一个回调callback()

   // 在 shell 中执行一个命令
   var exec = require('child_process').exec;
   gulp.task('jekyll', function(cb) {
     // 编译 Jekyll
     exec('jekyll build', function(err) {
       if (err) return cb(err); // 返回 error
       cb(); // 完成 task
     });
   });
   

2. 返回stream？

   gulp.task('somename', function() {
     var stream =
        gulp.src('client/**/*.js')
            .pipe(minify())
            .pipe(gulp.dest('build'));
        return stream;
   });
   

3. 返回promise？

       var Q = require('q');
           gulp.task('somename', function() {
         var deferred = Q.defer();
   
         // 执行异步的操作
         setTimeout(function() {
           deferred.resolve();
         }, 1);
   
         return deferred.promise;
       });
   

   
   

顺序执行

案例：

 gulp.task('two',['one'],function(){
 })
 //two 依赖与one的执行完成

注意的是：one 任务定义的时候需要在结束的时候返回一个回调，或者promise，或者stream

插件知识

问题与答案

1. 在哪可以找到插件？
   答：http://gulpjs.com/plugins/
2. 在哪可以找到学习资料与总结？
   答：https://github.com/Platform-CUF/use-gulp

常用插件

1. gulp-prettify
2. gulp-minify-css:压缩css文件
3. gulp-rename：重命名，如给压缩后的文件重新命名，{suffix: '-rtl'}。参数添加后缀，同样可以添加{preffix:}的前缀。
4. gulp-rtlcss：左右调换的插件

5. gulp-uglify：压缩js文件

    gulp.src(['./assets/apps/scripts/*.js','!./assets/apps/scripts/*.min.js'])
        .pipe(uglify())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('./html'));
   
   //*** HTML formatter task
    gulp.task('prettify', function() {
       gulp.src('./**/*.html')
           .pipe(prettify({
               indent_size: 4, 
               indent_inner_html: true,
               unformatted: ['pre', 'code']
           }))
           .pipe(gulp.dest('./'));
   });
    ```
   

6. gulp-sass:预编译sass 文件

如上图：
1. uglify()进行了js 的压缩
2. ！!./assets/apps/scripts/*.min.js忽视了已经压缩过的js 文件。
3. rename（）进行了重命名
4. .pip(sass()) 方法预编译sass文件
5. gulp-prettify ：格式化代码