自动构建化工具2-Gulp

今天我们来说收自动化构建工具的第二个Gulp，通过对于Gulp的学习，个人感觉，确实是比Grunt好用些。

首先，Gulp拥有自己的内存，文件一直存在于Gulp内存中进行操作，其次Gulp使用commonjs那样的语法，引入Gulp的包，返回gulp对象，通过对象的方法，去执行任务（如：查找要调用的源文件），然后通过链式调用的方法，调用pipe，把文件一直放在Gulp的内存里，再进行各种任务处理（如：合并，压缩），最后再进行输出。

首先，我们按照如下规则创建目录

|- dist
  |- src
    |- js
    |- css
    |- less
  |- index.html
  |- gulpfile.js-----gulp配置文件
  |- package.json
    {
      "name": "gulp_test",
      "version": "1.0.0"
    } 

如果想使用Gulp，还是先需要使用npm下载：

安装gulp:
  * 全局安装gulp
    ```
    npm install gulp -g
    ```
  * 局部安装gulp
    ```
    npm install gulp --save-dev

Gulp与Grunt一样，都是在命令行运行程序的，Gulp只要在命令行输入gulp，即可执行运行gulp

当然了，想运行gulp还是要进行任务配置的，这时，我们打开gulpfile.js这个文件，开始我们的配置。

开始，我们需要引入gulp的包，使用返回的gulp对象进行操作。

//这是引入gulp的包，才可以进行任务配置
var gulp = require("gulp");

然后使用gulp.task方法，创建两个方法，一个是必须有的默认任务（输入gulp就会执行），一个是自定义任务

gulp.task("js",function () {
    
})

//注册默认任务，在命令行输入gulp时，默认任务就会执行
gulp.task("default",[]);

方法中，必须要先写return，然后使用gulp.src找到你要的文件，然后文件就会进入gulp的内存

gulp.task("js",function () {
    //必须要先写return，然后使用gulp.src找到你要的文件，然后文件就会进入gulp的内存
    return gulp.src("src/js/*.js") 
})

如果我们想进行合并，压缩等操作，就必须引入相应的插件，在npm进行下载

npm install gulp-concat gulp-uglify gulp-rename --save-dev

再在gulpfile.js中进行导入

//引入插件
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");

再在我们自定义的方法中，使用链式调用，并且用这些插件执行任务

 return gulp.src("src/js/*.js")
        //使用pipe对内存中的数据进行处理，pipe函数中放入gulp的插件进行具体任务操作
        .pipe(concat("build.js"))//concat代表合并文件
        .pipe(uglify())//uglify代表文件的压缩
        .pipe(rename("build.min.js"))//重命名文件，rename函数的参数为新的文件名
        .pipe(gulp.dest("dist/js/"))//最后使用gulp.dest(输入位置)来输出文件。

最后，在命令行中，输入 gulp 就可以执行了。

我把总体的代码贴上来

//这是引入gulp的包，才可以进行任务配置
var gulp = require("gulp");
//引入插件
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");

//首先要注册任务
//gulp.task(任务名,function(){将你的任务的任务代码放在这}),这是gulp注册任务的固定函数,任务名自己定义就好了。
gulp.task("js",function () {
    //必须要先写return，然后使用gulp.src找到你要的文件，然后文件就会进入gulp的内存
    return gulp.src("src/js/*.js")
        //使用pipe对内存中的数据进行处理，pipe函数中放入gulp的插件进行具体任务操作
        .pipe(concat("build.js"))//concat代表合并文件
        .pipe(uglify())//uglify代表文件的压缩
        .pipe(rename("build.min.js"))//重命名文件，rename函数的参数为新的文件名
        .pipe(gulp.dest("dist/js/"))//最后使用gulp.dest(输入位置)来输出文件。
})

//注册默认任务，在命令行输入gulp时，默认任务就会执行
gulp.task("default",[]);

-----------------------------------------------------------------------------------------------------------------------------

接下来，我们进行less的编译和css的合并压缩

还是先下载插件: npm install gulp-less gulp-clean-css --save-dev 

首先进行less的编译，先导入gulp-less

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

然后创建一个less文件，在src/less/test3.less

@base: yellow;
.index1 { color: @base; }
.index2 { color: green; }

再在gulpfile.js中进行任务的配置

//less打包任务
gulp.task("less",function () {
    //比较简单，先找到要编译的文件
    gulp.src("src/less/*.less")
        //用less()方法进行编译
        .pipe(less())
        //最后使用gulp.dest("路径")进行输出
        .pipe(gulp.dest("src/css/"))
})

最后在命令行输入 gulp less 执行任务。我们会在src/css/中得到test3.css这个文件。

.index1 {
  color: yellow;
}
.index2 {
  color: green;
}

-------------------------------------------------------------------------------------------------------------------------------

less编译完毕，接下里，我们进行css的合并压缩

因为之前下载过了，这次，我们直接导入就可以了

var cleanCss = require("gulp-clean-css");

我们先创建一个css文件 src/css/index.css

.box1{
    height: 100px;
    width: 100px;
    background-color: blue;
}
.box2{
    height: 150px;
    width: 150px;
    background-color: red;
}

然后在gulpfile.js中进行任务配置

//css合并压缩
gulp.task("cleancss",function () {
    //找到要合并压缩的css文件
    gulp.src("src/css/*.css")
        //合并css文件，concat这个方法既可以合并js，也可以合并css，且必须传入一个文件名作为合并后文件的文件名
        .pipe(concat("build.css"))
        //使用cleanCss()方法进行压缩
        .pipe(cleanCss())
        //给文件一个新文件名
        .pipe(rename("build.min.css"))
        //最后进行文件输出
        .pipe(gulp.dest("dist/css/"))
})

最后在命令行窗口输入 gulp cleancss 就可以了。

--------------------------------------------------------------------------------------------------------------------------------

关于gulp任务执行上，有同步，异步两种方法，如果直接把任务添加到defale这个任务中，如果每个任务中先用return进行返回，则任务是异步执行，如果没有用return，则是同步执行。

异步 执行虽然很快，没有阻塞，但是也有一些问题，如，合并css任务则需要less编译任务先执行完毕，即：css任务依赖与less任务。  

异步解决：这是我们就可以在任务方法的第二个参数添加一个数组，数组中填写依赖的任务就可以了，这样，当执行到该任务时，会先执行依赖任务到完毕，才会执行该任务。

//第二个数组参数中填写的任务是依赖任务，只有依赖任务执行完毕，才会执行任务本身。
gulp.task("cleancss",["less"],function () {
   
})

--------------------------------------------------------------------------------------------------------------------

接下来进行html的压缩，还是先用npm下载。

npm install gulp-htmlmin --save-dev

导入包 

var htmlmin = require("gulp-htmlmin");

进行任务配置

//压缩html
gulp.task("htmlmin",function (){
    //找到要压缩的html文件
    gulp.src("index.html")
        //pipe中传入htmlmin方法，collapseWhitespace表示是否清除无用空格
        .pipe(htmlmin({
            collapseWhitespace: true
        }))
        //输出文件
        .pipe(gulp.dest("dist/"))
})

----------------------------------------------------------------------------------------------------------------------------------

普通的一些任务，我们都说的差不多了，接下里，我们说说自动化任务的构建吧，就是每次改变源文件，都自动进行相应的任务编译，打包处理。

要想进行自动化的任务，还是要先下载插件，            npm install gulp-livereload --save-dev

然后引包 

var livereload = require("gulp-livereload");

进行自动化任务的任务配置

//半自动化任务构建，运行该任务时，会先把默认任务队列的任务执行一遍。
gulp.task("watch",["default"],function () {
    //首先使用livereload对象开启监听
    livereload.listen();
    //然后监控文件，和文件发生变化应该执行的任务。
    gulp.watch(["src/js/*.js"],["js"]);
    gulp.watch(["src/css/*.css","src/less/*.less"],["cleancss"]);
    gulp.watch(["index.html"],["htmlmin"]);

})

然后在每个具体的任务最后一行加上 

.pipe(livereload())

加上之后，可以更稳定的显示最新的效果。

在命令行窗口输入 gulp watch 执行任务，执行后，就发现光标一直在闪烁，这时，如果修改源文件的话，就会自动进行编译了。

---------------------------------------------------------------------------------------------------------------------------------

有小伙伴可能注意到了，我的注释写的是半自动化任务，想想，如果我们修改源文件后，未打开的页面自动打开，打开的页面自动刷新，是不是会更好呢？

下载 npm install gulp-connect open --save-dev 

引包 

var connect = require("gulp-connect"); //自动热加载
var open = require("open");//打开与刷新文件

配置

//进行全自动任务的配置，这个包内置一个微型服务器，运行之后，会有一个地址，访问之后
// ，就是主页面的地址。
gulp.task("server",["default"],function () {
    //对于服务器的配置
    connect.server({
        //所有资源的根目录，如主页面引入了css文件，地址是css/build.min.css
        //有了根目录，会在dist/目录下寻找css/build.min.css
        root:"dist/",
        //是否实时刷新
        livereload:true,
        //端口号
        port:5000
    })
    //独立与gulp的插件，需要重新下载，任务运行自动打开，文件变化就自动刷新
    open("http://localhost:5000/");
    //监控的文件，以及执行的相应任务。
    gulp.watch(["src/js/*.js"],["js"]);
    gulp.watch(["src/css/*.css","src/less/*.less"],["cleancss"]);
    gulp.watch(["index.html"],["htmlmin"]);
})

---------------------------------------------------------------------------------

最后，来看看我们引入了多少gulp的插件吧

var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
var less = require("gulp-less");
var cleanCss = require("gulp-clean-css");
var htmlmin = require("gulp-htmlmin");
var livereload = require("gulp-livereload");
var connect = require("gulp-connect");

足足有八个，这还是一个不太完善的自动化，包太多了，引入也麻烦，所以，gulp有一个包的管理器，引入一个管理器，这些包都在管理器里面。

下载   npm install gulp-load-plugins --save-dev  

引包

var $ = require("gulp-load-plugins")();

引入： var $ = require('gulp-load-plugins')();！！！引入的插件是个方法，必须记住调用

* 所有的插件用 $ 引出，其他插件的方法名统一为插件的功能名字(即插件名字的最后一部分)：如：concat,connect,cssmin...
            gulp.task('lib', function() {
              gulp.src('bower_components/**/*.js')
              .pipe(gulp.dest(app.devPath + 'vendor'))
              .pipe(gulp.dest(app.prdPath + 'vendor'))
              .pipe($.connect.reload());
            });