前端构建工具Gulp.js简单实例

在软件开发中使用自动化构建工具的好处是显而易见的。通过工具自动化运行大量单调乏味、重复性的任务,比如图像压缩、文件合并、代码压缩、单元测试等等,可以为开发者节约大量的时间,使我们能够专注于真正重要的、有意义的工作,比如设计业务逻辑,编写代码等等。

(一)安装Gulp.js

Gulp.js是基于Node的构建工具,类似Grunt,要使用它,你的机器上需要装有Node.js。有关如何安装Node,这里就不再赘述,可以参考官网的指导。有了Node.js,安装Gulp.js就非常容易了,只需要通过npm(Node包管理工具)来安装即可。在命令行模式下执行:

npm install -g gulp

这样就可以将gulp以全局方式安装到你的电脑上,以后可以随时通过命令行的gulp命令来调用。

(二)在前端项目中配置Gulp.js

要在你的项目中使用Gulp,有几个关键的步骤需要完成:

  • 安装两个依赖包

  • 安装你需要的任意插件

  • 创建 gulpfile.js文件,在其中定义你要运行的任务

这些步骤需要在你的项目根目录下完成。

首先,要安装依赖项:

npm install --save-dev gulp gulp-util

接下来,安装我们需要使用到的Gulp插件,这些插件同样也都是Node模块,我们同样使用npm命令来安装它们:

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

在上面的例子中,安装了两个插件gulp-uglify和gulp-concat,通过它们可以对Javascript文件进行合并和压缩。

注意这里使用了--save-dev参数来安装Gulp依赖和插件,加上这个参数以后,在安装这些包的同时,也会把它们添加到我们的包配置文件package.json:

{
  "devDependencies": {
    "gulp": "^3.6.2",
    "gulp-concat": "^2.2.0",
    "gulp-uglify": "^0.2.1",
    "gulp-util": "^2.2.14"
  }
}

这样可以确保项目所需的依赖包可以便捷地通过npm来进行安装。如果你的项目没有package.json文件,可以在命令行通过npminit来创建,也可以通过文本编辑器创建。这是npm相关的知识,这里就不细说了。在前面的例子中,只安装了两个插件,Gulp提供了超过200个插件,涵盖了前端开发流程中的很多工作。

(三)Gulpfile.js文件

与Grunt一样,Gulp也有一个同名配置文件,叫做gulpfile.js,在这个文件里定义需要用到什么插件,执行什么任务,如何执行等等。这个文件应该存放在你的项目根目录下。

到目前为止,一切看起来都和Grunt没什么区别,那么为什么要介绍Gulp呢?接下来就是它的优势所在了。gulpfile.js的语法非常简单直接,具有非常好的可读性,便于理解。看一下例子:

var gulp=require('gulp'),
    gutil=require('gulp-util'),
    uglify=require('gulp-uglify'),
    concat=require('gulp-concat');

这就是一条非常简单的Javascript变量定义语句,它告诉Gulp我们需要哪些插件来完成下面的任务定义。

接下来,我们要定义需要Gulp去运行的任务。在这个例子中,需要Gulp去完成两件事:

  • 压缩Javascript文件

  • 合并Javascript文件

在Gulp中,定义任务非常直接,就是调用Javascript的方法。我们通过Gulp提供的task()方法来定义任务:

gulp.task('js', function() {
    gulp.src('./js/*.js')
        .pipe(uglify())
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./js'));
});

看一下上面的代码,gulp.task(name,callback)方法需要两个参数,第一个是任务名称,第二个是回调函数。这个一看就明白了,没什么要解释的。看一下回调函数里面的代码:

gulp.src('./js/*.js')

src()方法用来指定要处理的js文件的位置,它会获取匹配到的所有js文件的路径,并将它们转换为可以传递给插件进行处理的“流”。这是Node.js的StreamsAPI的组成部分,也是Gulp能够实现如此简洁的API语法的原因。

.pipe(uglify())

pipe()方法获取刚才通过src()方法获得并传递过来的“流”,并将其传递给指定的插件。本例中是uglify插件。

.pipe(concat('all.js'))

与uglify一样,concat插件通过pipe()方法接收经过上一个方法处理之后返回的“流”,并把他们该“流”中的所有Javascript文件合并为一个名为"all.js"的文件。

.pipe(gulp.dest('./js'));

最后,通过Gulp的dest()方法,"all.js"被写入到我们指定的目录。整个过程非常直观,易于理解。可以想象一下jQuery的链式调用,也可以想象一下*nix系统下的grep,awk这些命令。

我们要做的最后一件事,是指定Gulp的默认任务,让它执行我们刚才定义的"js"任务。

gulp.task('default', ['js']);

完整的gulpfile.js:

// 定义依赖项和插件
var gulp=require('gulp'),
    gutil=require('gulp-util'),
    uglify=require('gulp-uglify'),
    concat=require('gulp-concat');
 
// 定义名为 "js" 的任务
gulp.task('js', function(){
    gulp.src('./js/*.js')
        .pipe(uglify())
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./js'));
});
 
// 定义默认任务
gulp.task('default', ['js']);

回到命令行(项目根目录),输入gulp,回车。Gulp找到gulpfile.js文件,加载依赖的插件,启动默认任务,然后执行我们的"js"任务,你可以看到最终结果。

Gulp还提供了一个名为watch()的方法,可以自动检查指定的资源(文件)的变化。这样就可以在文件发生变化时自动执行特定的任务,不必每次修改了文件就要回到命令行手动执行gulp

gulp.watch('./js/*.js', ['js']);

这行代码执行时,Gulp会持续监控./js/目录下所有的js文件,一旦文件发生变化,就会自动重新执行"js"任务来合并和压缩文件。当然,这行代码通常也要放到某个任务中去运行。

参考资料:

本文标题:前端构建工具Gulp.js简单实例

本文链接:http://yedward.net/?id=403

本文版权归作者所有,欢迎转载,转载请以文字链接的形式注明文章出处。

相关文章