近年来,前端工程化深入人心,而工程化中必不可少的环节就是构建。所谓构建就是基于既定的流程对项目中的文件进行处理,从而得到最终用于发布的文件。而Gulp正是目前最流行的前端构建工具之一。
Gulp的使用
以下是使用Gulp进行构建的例子,也是本文的示例项目。文件结构为:
– /Users/me/project/project-a
– src/
– dist/
– package.json
– gulpfile.js
其中「src」为源代码目录,「dist」为发布代码目录。「gulpfile.js」的代码为:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
| var gulp = require('gulp'), gulpCleanCSS = require('gulp-clean-css'), gulpUglify = require('gulp-uglify'), gulpMD5 = require('gulp-md5-plus'); gulp.task('copy-html', function() { return gulp.src('./src/*.html') .pipe( gulp.dest('./dist') ); }); gulp.task('compress-css', ['copy-html'], function() { return gulp.src('./src/*.css') .pipe( gulpCleanCSS() ) .pipe( gulpMD5(10, './dist/*.html') ) .pipe( gulp.dest('./dist') ); }); gulp.task('compress-js', ['copy-html'], function() { return gulp.src('./src/*.js') .pipe( gulpUglify() ) .pipe( gulpMD5(10, './dist/*.html') ) .pipe( gulp.dest('./dist') ); }); gulp.task('default', ['compress-css', 'compress-js']);
|
要正常执行这段代码,还要进行部署。
第一步,全局安装Gulp:
第二步,初始化「package.json」的内容(放置一个空对象即可):
最后一步,在项目目录下安装Gulp以及用到的插件:
1 2 3 4 5
| cd /Users/me/project/project-a npm install gulp --save npm install gulp-clean-css --save npm install gulp-uglify --save npm install gulp-md5-plus —save
|
部署完成后,项目目录下会多了一个「node_modules」文件夹,「package.json」也会记录了所需的依赖。此时在命令行中执行「gulp」就可以构建了。
然而,如果有多个项目,要怎么办呢?
– /Users/me/project
– project-a/
– project-b/
– project-c/
即使它们的构建流程是一样的,也要在每个项目下重复部署构建环境。一旦构建流程的代码有所改动,又得在每个项目中重新部署。为了解决这个问题,我们把「gulpfile.js」、「node_modules」以及「package.json」提取出来:
– /Users/me/project
– project-a/
– project-b/
– project-c/
– gulpfile.js
– node_modules/
– package.json
这样,其他项目在构建的时候也可以用「gulpfile.js」。例如要构建「project-b」时可以执行这样的命令:
1 2
| cd /Users/me/project gulp --project ./project-b
|
也就是增加「–project」参数指定要构建的项目。当然,「gulpfile.js」也要做一些改动去拿到这个参数的值。首先,安装「minimist」包:
1 2
| cd /Users/me/project npm install minimist --save
|
在「gulpfile.js」中通过这个包解析命令行参数:
1 2
| var argv = require('minimist')( process.argv.slice(2) ); argv.project;
|
然后修改「gulpfile.js」中所有匹配路径的代码即可:
1 2 3 4 5 6 7
| var path = require('path'); gulp.src( path.join(argv.project, './src/*.html') ) gulp.dest( path.join(argv.project, './dist') )
|
然而,因为Gulp默认情况下是调用当前目录的「gulpfile.js」,所以,如果当前目录不是该文件所在的目录,就要增加「–gulpfile」参数去指定它的路径:
1 2 3 4 5 6 7 8
| cd /Users/me/project gulp --project ./project-a cd /Users/me/project-a gulp --gulpfile ../gulpfile.js --project ./project-a cd /Users/me gulp --gulpfile ./project/gulpfile.js --project ./project-a
|
这显然还不够方便。下面我们进一步把构建代码封装成命令行工具「fe-build」,使其可以这样调用:
1 2 3 4 5
| cd /Users/me fe-build /Users/me/project/project-a cd /Users/me/project/project-a fe-build .
|
封装为npm包
Gulp的调用入口
要基于Gulp封装另一个npm包,得先理解Gulp的调用方式。查看Gulp的「package.json」可以发现这样一段:
1 2 3
| "bin": { "gulp": "./bin/gulp.js" }
|
也就是说,在命令行中执行「gulp」时,实际上运行的是Gulp包内bin目录下的「gulp.js」。
下面做个小实验,在「project」目录下新建「run.js」,其内容为:
1
| require('gulp/bin/gulp');
|
然后在命令行运行:
1 2
| cd /Users/me/project node run.js --project ./project-a
|
构建结果跟直接运行「gulp」是一致的。这意味着我们可以通过代码调用Gulp,而且在调用之前还可以做一些「手脚」。
准备
建立另一个项目去开发这个工具:
– /Users/me/tool/fe-build
– node_modules/
– bin/fe-build.js
– gulpfile.js
– package.json
其中「gulpfile.js」、「node_modules」和「package.json」都可以从「project」目录剪切过来。开发的时候,要达到的效果是,通过以下调试命令可以对project-a进行构建:
1 2
| cd /Users/me/tool/fe-build node bin/fe-build.js /Users/me/project/project-a
|
编码
第一步,在「fe-build.js」中获取路径参数。该参数直接跟在运行的js文件后面,获取更方便了(不需要再借助「minimist」):
1 2 3 4 5
| var pjPath = process.argv[2]; var path = require('path'); pjPath = path.resolve(pjPath);
|
「pjPath」肯定要在「gulpfile.js」中使用,但是「gulpfile.js」无法访问「fe-build.js」中的局部变量。所以在调用Gulp之前,还要把「pjPath」记录到全局变量:
1 2
| process.env.PJ_PATH = pjPath; require('gulp/bin/gulp');
|
第二步,修改「gulpfile.js」中所有匹配路径的代码:
1 2 3
| var pjPath = process.env.PJ_PATH; gulp.src( path.join(pjPath, 'src', '*.html') ) gulp.dest( path.join(pjPath, 'dist') )
|
尝试执行调试命令,但出现错误:
1
| Task '/Users/me/project/project-a' is not in your gulpfile
|
要理解这个错误的起因,首先要知道,无论是「fe-build.js」还是通过它调用的Gulp,都是从全局变量「process.argv」获取命令行参数的。而查找Gulp的官方文档可以发现,「gulp」有这样一种执行方式:
所以Gulp就把路径参数识别为任务id了。所幸的是,「process.argv」这个数组是可以修改的。既然如此,只要在调用Gulp之前,把项目路径参数从数组里面移掉就可以了。
1 2 3 4 5 6 7
| var path = require('path'); var pjPath = path.resolve(process.argv[2]); process.env.PJ_PATH = pjPath; process.argv.splice(2, 1); require('gulp/bin/gulp');
|
现在再执行调试命令,已经可以正常运行了。但是稍微改一下:
1 2
| cd /Users/me node /Users/me/tool/fe-build/bin/fe-build.js /Users/me/project/project-a
|
还是出现错误:
导致这个问题的原因是,「gulpfile.js」不在当前目录(「/Users/me」)下。所以「–gulpfile」参数还是必须的,不过并不是加到命令上,而是操作「process.argv」:
1 2 3 4
| process.argv.push( '--gulpfile', path.resolve(__dirname, '../gulpfile.js') );
|
其中「__dirname」是全局变量,表示当前脚本文件所在的目录。因为「fe-build.js」跟「gulpfile.js」的路径关系是确定的,所以通过前者的路径就可以很方便地计算出后者的路径。
「fe-build.js」的全部代码为:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| var path = require('path'); var pjPath = path.resolve(process.argv[2]); process.argv.splice(2, 1); process.env.PJ_PATH = pjPath; process.argv.push( '--gulpfile', path.resolve(__dirname, '../gulpfile.js') ); require('gulp/bin/gulp');
|
「gulpfile.js」的全部代码为:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
| var path = require('path'), gulp = require('gulp'), gulpCleanCSS = require('gulp-clean-css'), gulpUglify = require('gulp-uglify'), gulpMD5 = require('gulp-md5-plus'); var pjPath = process.env.PJ_PATH; gulp.task('copy-html', function() { return gulp.src( path.join(pjPath, 'src', '*.html') ) .pipe( gulp.dest( path.join(pjPath, 'dist') ) ); }); gulp.task('compress-css', ['copy-html'], function() { return gulp.src( path.join(pjPath, 'src', '*.css') ) .pipe( gulpCleanCSS() ) .pipe( gulpMD5( 10, path.join(pjPath, 'dist', '*.html') ) ) .pipe( gulp.dest( path.join(pjPath, 'dist') ) ); }); gulp.task('compress-js', ['copy-html'], function() { return gulp.src( path.join(pjPath, 'src', '*.js') ) .pipe( gulpUglify() ) .pipe( gulpMD5( 10, path.join(pjPath, 'dist', '*.html') ) ) .pipe( gulp.dest( path.join(pjPath, 'dist') ) ); }); gulp.task('default', ['compress-css', 'compress-js']);
|
安装
「npm」命令对全局安装的包是有要求的,必须在「package.json」中指定name、version和bin。修改「package.json」增加这三项(「minimist」的依赖可以删掉了):
1 2 3 4 5 6 7 8 9 10 11 12 13
| { "name": "fe-build", "version": "1.0.0", "bin": { "fe-build": "bin/fe-build.js" }, "dependencies": { "gulp": "^3.9.1", "gulp-clean-css": "^2.0.4", "gulp-md5-plus": "^0.2.0", "gulp-uglify": "^1.5.3" } }
|
然后就可以进行安装:
1 2
| cd /Users/me/tool/fe-build npm install -g
|
构建目标项目:
1
| fe-build /Users/me/project/project-a
|
意外情况出现了:
相信很多新手用Node.js开发命令行工具时也会遇到相同的问题。原因在于,操作系统不知道用什么环境去运行「fe-build」(开发的时候指定了「node fe-build.js」,所以不会有问题)。解决方法也很简单,在「fe-build.js」的开头声明运行环境即可(留意第一行):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| #!/usr/bin/env node var path = require('path'); var pjPath = path.resolve(process.argv[2]); process.argv.splice(2, 1); process.env.PJ_PATH = pjPath; process.argv.push( '--gulpfile', path.resolve(__dirname, '../gulpfile.js') ); require('gulp/bin/gulp');
|
改好之后重新安装一次,就可以正常运行了。
就这样,一个专属的构建工具就完成了。而且,不知道大家有没有发现这样做的另一个好处:「gulpfile.js」以及部署产生的「node_modules」、「package.json」不用再放在具体项目的目录下,可以减少开发时的干扰。