细说gulp

1、概述&安装

Gulp，简而言之，就是前端自动化开发工具，利用它，咱们能够提升开发效率。

好比：

　　一、  压缩js

　　二、  压缩css

　　三、  压缩less

　　四、  压缩图片

　　等等…

咱们彻底能够利用Gulp来自动化地完成这些重复性很强的工做。

好了，废话很少说了。既然要了解Gulp，就得先安装它。

Gulp是基于node来实现的，so你得先有个node环境（见“初探nodeJS”）。

node环境有了后，安装Gulp就很easy咯。

命令行中，输入npm install gulp –g就OK啦。（-g表明全局）。

以下：

安装完成后，输入gulp –v查看是否安装成功。

以下：

 

但，就算你这么安装了全局gulp，你每次到项目中时，还得在相应目录下安装gulp。

缘由就是，gulp就这么设置的，避免发生版本冲突。

因此这步安装gulp能够可无，不过就当初步了解它嘛。

2、小试牛刀之压缩Javascript

由于gulp是自动化工具，因此咱们得告诉它，须要怎么作，才能达到咱们的目的。

咱们首先得新建一个js文件，用来编写咱们的需求，以便gulp能按着咱们的意愿来执行。

如，我将这个js文件取名叫gulpfile( 且必须取为gulpfile名，不然在node环境下运行是，会报错：No gulpfile found)，并放置在D盘中的gulp文件夹里。

随后，打开新建的gulpfile.js，开始咱们的压缩JavaScript之路吧。

gulp做为node的一个模块，因此，第一步咱们得在gulpfile.js里引入gulp这个模块。

以下：

接着，由于咱们这次的目的是压缩JavaScript，因此还得引入一个压缩Javascript的模块（gulp-uglify）

以下：

最后，就是具体编写咱们的需求了。

如个人需求是，将script文件夹中的JavaScript文件压缩到newScript文件夹中。

具体代码以下：

//引入gulp
var gulp = require('gulp');
//引入gulp-uglify模块，用于压缩JS
var uglify = require('gulp-uglify');
//'firstScript'为咱们自定义的任务名，匿名函数为'firstScript'具体任务
gulp.task('firstScript', function(){
    // 'script/*.js'是即将压缩的js文件
    gulp.src('script/*.js')
        //uglify()是调用的压缩方法，去压缩js
        .pipe(uglify())
        //gulp.dest是将压缩后的文件另存为哪的方法，如存到newScript文件夹中
        .pipe(gulp.dest('newScript'));        
});

EntireCode

好了，在node环境下运行上述代码，不过不是利用node哈，由于是gulp，因此得用gulp命令，以下（’firstScript’为刚才自定义的任务名）：

 

敲击回车，执行：

 

可是，报错。

缘由：咱们就没有将gulp、gulp-uglify这两个模块到本地嘛。

咦，gulp，咱们不在前面安装了么？安装的全局gulp呢

是的，是安装了，可是大概为了不gulp的版本冲突吧，因此咱们还得安装，因此全局安装没卵用。

请在命令中输入npm install gulp和npm install gulp-uglify安装它们。安装好后，会发如今相应目录下会多出个node_modules的文件夹，里面就涵盖了咱们安装的模块。

另外，再在script文件夹中加入一段js代码用来测试压缩效果，如：

function hello(){
    console.log('hello world');
};

好了，再次运行上述代码。

得下图：

Perfect！！这就压缩好了，咱们在script文件夹中发现多了一个newScript文件夹，且，里面有压缩好的js文件哦。

截取压缩好的js以下：

 

但，不知道你们发现上述的代码有个不足没？

若是文件改变了，咱们每次都得本身手动在node环境下，输入gulp + 相应任务名执行操做。

说好的自动化呢？

因此咱们得修改上述代码，让其自动化--一旦script文件下的js文件变更，就本身自行压缩。

利用gulp.watch方法，可监听文件，来弥补这一不足，如：在这里监听script下的js文件。（一旦变化，就自动压缩)

以下：

 

//引入gulp
var gulp = require('gulp');
//引入gulp-uglify模块，用于压缩JS
var uglify = require('gulp-uglify');
//'firstScript'为咱们自定义的任务名，匿名函数为'firstScript'具体任务
gulp.task('firstScript', function(){
    // 'script/*.js'是即将压缩的js文件
    gulp.src('script/*.js')
        //uglify()是调用的压缩方法，去压缩js
        .pipe(uglify())
        //gulp.dest是将压缩后的文件另存为哪的方法，如存到newScript文件夹中
        .pipe(gulp.dest('newScript'));        
});
//新增一个auto任务
gulp.task('auto', function(){
    //利用watch方法监听script下的js文件，若是变更，则执行firstScript任务
    gulp.watch('script/*.js', ['firstScript']);
});

EntireCode

执行上述，只需在node环境下输入gulp auto就OK啦，一旦script文件下的js文件改变，它就自动压缩。

且，由于是监听，因此当输入gulp auto时，不会首先压缩一遍script下js文件。

But，咱们不还得输入’auto’这个任务名吗？！！

因此，为了更加完善，咱们能够这么作：

//引入gulp
var gulp = require('gulp');
//引入gulp-uglify模块，用于压缩JS
var uglify = require('gulp-uglify');
//'firstScript'为咱们自定义的任务名，匿名函数为'firstScript'具体任务
gulp.task('firstScript', function(){
    // 'script/*.js'是即将压缩的js文件
    gulp.src('script/*.js')
        //uglify()是调用的压缩方法，去压缩js
        .pipe(uglify())
        //gulp.dest是将压缩后的文件另存为哪的方法，如存到newScript文件夹中
        .pipe(gulp.dest('newScript'));        
});
//新增一个auto任务
gulp.task('auto', function(){
    //利用watch方法监听script下的js文件，若是变更，则执行firstScript任务
    gulp.watch('script/*.js', ['firstScript']);
});
//将须要默认执行的任务名，添加到default任务中，如，添加上面的‘auto’任务
gulp.task('default',['auto']);

EntireCode  

注：default任务名不能改变哦。

这样咱们就能够直接在node环境下：gulp + 回车，去执行default中的相关任务。

但，上述代码仍是不够完美，且不足还很大，就是：当gulp.watch方法监听到script文件夹中的某个js代码发生改变时，gulp会将script下全部的js都压缩一遍，极大地影响性能。(不信，本身能够测试下)

纳尼？这可如何是好。

不用怕，利用gulp-watch-path这个模块，就能够作到修改了什么，就实时压缩对应文件，而不是盲目地全压缩。

代码以下：

 

//引入gulp
var gulp = require('gulp');
//引入gulp-uglify模块，用于压缩JS
var uglify = require('gulp-uglify');
//引入gulp-watch-path
var watchPath = require('gulp-watch-path');
//'firstScript'为咱们自定义的任务名，匿名函数为'firstScript'具体任务
gulp.task('firstScript', function(){
    // 'script/*.js'是即将压缩的js文件
    gulp.src('script/*.js')
        //uglify()是调用的压缩方法，去压缩js
        .pipe(uglify())
        //gulp.dest是将压缩后的文件另存为哪的方法，如存到newScript文件夹中
        .pipe(gulp.dest('newScript'));        
});
//新增一个auto任务
gulp.task('auto', function(){
    //利用watch方法监听script下的js文件，若是变更，则执行firstScript任务
    //gulp.watch('script/*.js', ['firstScript']);
    //event为gulp.watch回调函数中的event
    gulp.watch('script/*.js', function(event){
        var paths = watchPath(event, 'script', 'newScript');
        gulp.src(paths.srcPath)
            .pipe(uglify())
            //paths.distDir为目录文件，若是换成paths.distPath，会报错：file already exists
            .pipe(gulp.dest(paths.distDir));
    });
});
//将须要默认执行的任务名，添加到default任务中，如，添加上面的‘auto’任务
gulp.task('default',['auto']);

EntireCode

上述代码已经很完美了，可是压缩的文件名与没压缩的文件名同样滴，总感受怪怪的，不是么？一般压缩文件应该带有min的后缀吧。因此咱们再来修改修改。

引入gulp-rename这个模块，用于重命名压缩后的文件。

代码以下：

//引入gulp
var gulp = require('gulp');
//引入gulp-uglify模块，用于压缩JS
var uglify = require('gulp-uglify');
//引入gulp-watch-path
var watchPath = require('gulp-watch-path');
//引入gulp-rename
var rename = require('gulp-rename');
//'firstScript'为咱们自定义的任务名，匿名函数为'firstScript'具体任务
gulp.task('firstScript', function(){
    // 'script/*.js'是即将压缩的js文件
    gulp.src('script/*.js')
        //uglify()是调用的压缩方法，去压缩js
        .pipe(uglify())
        //给压缩后的文件，添加min后缀名
        .pipe(rename({suffix: '.min'}))
        //gulp.dest是将压缩后的文件另存为哪的方法，如存到newScript文件夹中
        .pipe(gulp.dest('newScript'));        
});
//新增一个auto任务
gulp.task('auto', function(){
    //利用watch方法监听script下的js文件，若是变更，则执行firstScript任务
    //gulp.watch('script/*.js', ['firstScript']);
    //event为gulp.watch回调函数中的event
    gulp.watch('script/*.js', function(event){
        var paths = watchPath(event, 'script', 'newScript');
        gulp.src(paths.srcPath)
            .pipe(uglify())
            //给压缩后的文件，添加min后缀名
            .pipe(rename({suffix: '.min'}))
            //paths.distDir为目录文件，若是换成paths.distPath，会报错：file already exists
            .pipe(gulp.dest(paths.distDir));
    });
});
//将须要默认执行的任务名，添加到default任务中，如，添加上面的‘auto’任务
gulp.task('default',['auto']);

EntireCode  

OK，gulp来压缩JavaScript之路，就到此为止咯。

3、其余

相似的：CSS、LESS、图片等的压缩与上述”小试牛刀之压缩JavaScript”实际上是同样的道理，惟一的不一样就是它们所引入的压缩包不同。

如：

　　CSS     -----    对应gulp-minify-css模块

　　LESS    -----    对应gulp-less模块

　　图片    -----    对应gulp-imagemin模块

　　...

晚安，everyone~