工具--gulp

[cqupt-yifanwu]

关于Gulp

他是基于nodejs的自动任务运行器，能够自动化的完成javascript/coffee/sass/less/html/imgage/css等文件的测试、检测、合并、压缩、格式化、浏览器自动刷新、部署文件的生成、并且监听改动后重复指定的这些步骤。在实现上，gulp借鉴了Unxi操作系统的管道（pipe）思想，前一级的输出，直接编程后一级的输入，使得在操作上十分简单。

Gulp API

gulp只介绍了四个API：task、dest、src、watch，除此之外，gulp还提供了一个run方法。

• src：该方法是指定需要处理的源文件路径，返回当前文件流给可用的插件。gulp借鉴了Unix操作系统的管道（pipe）思想，前一级的输出直接变成后一级的输入。
• dest：能被上面的方法pipe进来，并且会写文件。并且重新输出（emits）所有的数据，因为你可以将它pipe多个文件夹。
• task：该方法用于定义一个gulp任务，是比较常用的一个方法，我们后面会结合插件的使用提到。
• watch：监视文件，并且可以在文件发生改动的时候做一些事情。它总会返回一个EventEmitter来发射（emit）change事件

常见插件

• gulp-uglify ： 压缩javascript文件，减小文件大小。

  var gulp = require('gulp'),
  uglify = require("gulp-uglify");
  gulp.task('minify-js', function () {
      gulp.src('js/*.js') // 要压缩的js文件
      .pipe(uglify())
      .pipe(gulp.dest('dist/js')); //压缩后的路径
  });
  

• gulp-rename ：用来重命名文件刘中的文件。用gulp.dest（）方法写入文件时，文件名使用的是文件流中的文件名，如果想要改变文件名，那可以在之前用gulp-rename插件改变文件流中的文件名。

  gulp.task('rename', function () {
      gulp.src('js/jquery.js')
      .pipe(uglify())  //压缩
      //会将jquery.js重命名为jquery.min.js
      .pipe(rename('jquery.min.js')) 
      .pipe(gulp.dest('js'));
  });
  

• gulp-minify-css
• gulp-htmlmin
• gulp-contact

使用gulp实例 -- 雪碧图

// ps : 现在已经sprite-css已经没有在更新了，现在焦sprity，也新增了一些功能，下面这段代码只是作为展示实例
gulp.task('sprite-css', function(){
  var DEST_NAME = args[1];
  return  gulp.src(`${WATCH_SRC}/**/*.png`)
              .pipe(spritesmith({
                  imgName: DEST_NAME + '.png',
                  cssName: DEST_NAME + '.css',
                  imgPath: '../images/' + DEST_NAME + '.png'
              }))
              .pipe(gulpif('*.png', gulp.dest('images/')))
              .pipe(gulpif('*.css', gulp.dest('css/')));
});