细说gulp

Gulp，简而言之，就是前端自动化开发工具，利用它，我们可以提高开发效率。

比如：

　　1、  压缩js

　　2、  压缩css

　　3、  压缩less

　　4、  压缩图片

　　等等…

我们完全可以利用Gulp来自动化地完成这些重复性很强的工作。

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

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

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

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

如下：

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

如下：

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

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

所以这步安装gulp可以可无，不过就当初步了解它嘛。

因为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文件夹中。

具体代码如下：

//引入gulpvar gulp = require('gulp');//引入gulp-uglify模块，用于压缩JSvar 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'));    });

原标题：细说gulp

关键词：