前端构建工具--gulp

前端自动化构建可以帮我们做：合并html，清除、合并、压缩css，拷贝图片，监控文件变化，运行web服务器，打开浏览器，使用webpack打包编译js
构建工具可以解放我们双手，提高开发效率

gulp是基于流的，使用的基本套路就是： 引入插件->注册任务->输入数据->任务处理->数据输出

基于流怎么理解？

grunt是操作生成一个临时文件；
gulp类似一个管道，文件读进来，执行相应的操作，然后生成最终的文件即可

gulp的基本概念：

gulp的基础api（4个）

gulp.task：任务
gulp.src：目标文件
gulp.dest：输出的文件目录
gulp.watch：监测文件变化

接下来就是以项目实战的方式说下gulp的一些简单用法

1、全局安装 gulp

npm install -g gulp

2、使用npm初始化项目

npm init

3、安装项目依赖

$ npm install --save-dev gulp
$ npm install --save-dev gulp-uglify
......

文件太多，就省略其他插件了，根据项目需要，进入相应的插件依赖（--save-dev命令是为了和项目关联，安装完成后可以在 package.json 文件中查看已安装的插件依赖；另外如果我们在github上下载了一个项目，打开package.json文件，看到依赖了n多个插件，如果要像上面npm install xxx 一个一个安装那就太痛苦了，可以使用 npm i 命令，就可以下载安装所有的依赖插件了。）

4、在项目跟目录下 新建 gulpfile.js 文件。在此文件中，需要使用require把上面依赖的插件引入进文件中。

具体代码：

 var gulp =require('gulp'),
     sass =require('gulp-sass'),
     concat =require('gulp-concat'),
     minifycss =require('gulp-minify-css'),
     uglify =require('gulp-uglify'),
     rename =require('gulp-rename'),
     autoprefixer =require('gulp-autoprefixer');

5、然后是使用gulp的几个api完成我们项目的构建工作。

一般构建功能有：文件压缩、文件合并、监控文件变化...，我们就以文件压为例，说下具体怎样用。

• 压缩css文件

gulp.task("mini_css", function(cb){
   var cssSrc = ['./css/*.css'];
   return gulp.src(cssSrc)      //压缩的文件 
        .pipe(concat('all.css'))    //合并所有css到all.css
        .pipe(gulp.dest('./main/css'))   //输出文件夹
        .pipe(rename({suffix: '.min'}))
        .pipe(minifycss())
        .pipe(gulp.dest('./main/css')); //执行压缩
})

• 压缩JS文件

gulp.task('minify_js',["clean"], function() {
    var jsSrc = ['./lib/*.js','!./lib/*.src.js'];
    return gulp.src(jsSrc)
        .pipe(concat('all.js'))    //合并所有js到all.js
        .pipe(gulp.dest('./lib'))    //输出all.js到文件夹
        .pipe(rename({suffix: '.min'}))   //rename压缩后的文件名
        .pipe(uglify())    //压缩
        .pipe(gulp.dest('./lib'));  //输出
});

• 删除文件

gulp.task('clean', function() {
   //执行压缩前，先删除以前压缩的文件
    return del(['./css/all.css', './css/all.min.css','./lib/all.min.js'])
});

• 任务集

gulp.task("dev", ["mini_css", "mini_js"])

6、执行gulp命令

• 可以单独执行一条命令

gulp minify_js

• 可以执行一个任务的集合（这个适合项目定制任务集合，比如在开发的时候需要使用watch监测文件变化的功能，在上线环境就不需要这个功能了）

gulp dev // 这个dev对应上面 任务集 声明的变量

• 如果想省劲，可以使用 default 作为任务的名称
  比如：

gulp.task("default ", ["mini_css", "mini_js"])

这时，在命令行就可以直接使用 gulp 命令，后面不需要在使用 任务名称了。