gulp学习笔记4

 gulp系列学习笔记：

1、gulp学习笔记1

2、gulp学习笔记2

3、gulp学习笔记3

4、gulp学习笔记4

之前的任务都是单个的，比较简单。接下去我们开始引用多个插件，一次性把任务搞定，省时又方便。

1、合并压缩js文件

　　为了提高网页的显示速度，最好是将所有的js文件合并成同一个文件，再来引用，这时候可以用到 gulp-concat 插件；进一步，还可以对其进行压缩。但是有时候我们在写js代码的时候，经常用到 console 语句和 debugger 语句。有时候会忘了删除，这时候我们可以用插件 gulp-strip-debug。

好了，任务开始，安装模块：

npm install gulp-concat --save-dev 
npm install gulp-strip-debug --save-dev 
npm install gulp-uglify --save-dev

在配置文件中编写相应的代码：

// 引用插件
var concat = require('gulp-concat');
var stripDebug = require('gulp-strip-debug');
var uglify = require('gulp-uglify');

// JS concat, strip debugging and minify
gulp.task('scripts', function() {
　// 将lib.js放在上面，其他文件任意顺序
  gulp.src(['./src/scripts/lib.js','./src/scripts/*.js'])
    .pipe(concat('script.js'))
    .pipe(stripDebug())
    .pipe(uglify())
    .pipe(gulp.dest('./build/scripts/'));
});

例如：

gulp.src(['./lib/file3.js', './lib/file1.js', './lib/file2.js'])

是将file3.js，file1.js 和 file2.js 按顺序进行合并。

后面输入相应的命令运行即可。

2、压缩合并css文件

与上一个任务基本相似，但是css里面不需要 gulp-strip-debug 插件，但是需要 gulp-autoprefixer 插件，能够自动添加css样式的前缀。

还是一样，安装相应的插件：

npm install gulp-autoprefixer --save-dev 
npm install gulp-minify-css --save-dev

在配置文件添加如下代码：

// 引用插件
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');

// CSS concat, auto-prefix and minify
gulp.task('styles', function() {
  gulp.src(['./src/styles/*.css'])
    .pipe(concat('styles.css'))
    .pipe(autoprefix('last 2 versions'))
    .pipe(minifyCSS())
    .pipe(gulp.dest('./build/styles/'));
});

其中的 autoprefix('last 2 versions')含义是包含主流浏览器最近的2个版本。

后面输入相应的命令运行即可。

3、监听任务，自动执行

上面我们建立了很多任务，比如html，css和js压缩等，那我们每次要做某一件事就输一次命令是不是太麻烦了。我们完全可以这样做：

// 建立默认的gulp任务
gulp.task('default', ['imagemin', 'htmlpage', 'scripts', 'styles'], function() {
  // 监听 HTML 变化
  gulp.watch('./src/*.html', function() {
    gulp.run('htmlpage');
  });

  // 监听 js 变化
  gulp.watch('./src/scripts/*.js', function() {
    gulp.run('jshint', 'scripts');
  });

  // 监听 CSS 变化
  gulp.watch('./src/styles/*.css', function() {
    gulp.run('styles');
  });
});

把这些任务都监听后，我们要做的就是输入命令运行：

gulp

这样我们文件有修改，就会自动运行。

gulp还有其他很多好用插件，这就需要看个人的任务需要了。

文章参考了以下资料：

1、gulp详细入门教程:  http://www.ydcss.com/archives/18;  

2、gulp API 文档:  http://www.gulpjs.com.cn/docs/api/;  

3、gulp 入门指南:  https://github.com/huanshen/gulp-book; 

4、An Introduction to Gulp.js:  https://www.sitepoint.com/introduction-gulp-js/