nodejs/gulp学习小记

以下是这两天学习gulp的笔记。因为gulp需要nodejs环境，所以我同时也学习了一点nodejs的使用。

gulp是一个前端构建工具，同类型的有grunt，也是基于nodejs环境的。这些构建工具的主要用途是压缩CSS/JS，混淆JS，添加banner，MD5内容哈希，图片spirit等。以前可能依赖在工程发布时用后端的编程语言或者其他脚本语言比如python编写的脚本，现在有了服务端js，准确来说，可以用表达为js的执行环境之后，出现了这些用js来表达的构建工具。

顺便说一下个人对于nodejs的理解。用js来表达的特点使得前端开发人员无学习成本地使用这个执行环境。不过js语法表达的限制使得node不太可能构建通用的服务端程序，换句话说nodejs有适合的领域，也有不太适合的领域。原先用其他语言实现的服务端功能不太可能完全照搬到nodejs上。当然现在大部分公司肯定存在异构语言的开发环境，对于受众主要是前端的场景来说，用js表达更有优势。

回到gulp上。在学习了一点npm（node的包管理器，类似ruby的gem）之后，得到如下结论。

1. 如果你要可执行的命令，执行npm install -g ，比如gulp
2. 如果你要给项目添加依赖，执行npm install --save-dev ，比如gulp-md5-plus, etc

原谅我没有单独学过npm，我只是在使用中了解这些命令背后的逻辑决定该怎么用而已。
我的测试项目的package.json，就是node用来了解你当前工程需要哪些依赖的一个配置文件，内容大致如下

{
  “name”: “gulp001”,
  “version”: “0.0.1”,
  “devDependencies”: {
    “del”: “^1.2.0”,
    “gulp”: “^3.9.0”,
    “gulp-concat”: “^2.6.0”,
    “gulp-md5-plus”: “^0.1.7”,
    “gulp-minify-css”: “^0.3.13”,
    “gulp-replace”: “^0.5.3”,
    “gulp-sourcemaps”: “^1.5.2”,
    “gulp-uglify”: “^1.2.0”,
    “shelljs”: “^0.5.1”
  }
}

{

“name”: “gulp001”,

“version”: “0.0.1”,

“devDependencies”: {

“del”: “^1.2.0”,

“gulp”: “^3.9.0”,

“gulp-concat”: “^2.6.0”,

“gulp-md5-plus”: “^0.1.7”,

“gulp-minify-css”: “^0.3.13”,

“gulp-replace”: “^0.5.3”,

“gulp-sourcemaps”: “^1.5.2”,

“gulp-uglify”: “^1.2.0”,

“shelljs”: “^0.5.1”

}

我很懒，只写了name和version，还有一个devDependencies。你一开始只要定义一个非常简单的配置就行，不需要加很多东西。增加依赖时会自动修改这个文件，所以之后没啥特殊情况，你不需要手动修改。
顺便说一句，npm install --save-dev 会在你当前工程的node_modules中新增这里的依赖。另外要验证你是否引入了某个包，可以在node的交互式环境中执行require('package_name');。

理解gulp并没有花太多时间，因为这工具的task概念和Java领域中的Ant很像，task依赖也是。不过gulp和grunt的不同点，即流式执行任务，让我选择先尝试gulp而不是grunt，即使grunt貌似受众更多。个人还是比较喜欢类似FP的流式执行的。

var gulp = require(‘gulp’);
var del = require(‘del’);
var uglify = require(‘gulp-uglify’);
var concat = require(‘gulp-concat’);
var sourcemaps = require(‘gulp-sourcemaps’);
var md5 = require(‘gulp-md5-plus’);
var minify = require(‘gulp-minify-css’);

gulp.task(‘default’, [‘scripts’, ‘styles’]);

gulp.task(‘clean’, function(cb){
  del([‘static-dest’], cb);
});

gulp.task(‘scripts’, [‘clean’], function(){
  gulp.src([‘static-src/js/*.js’])
      .pipe(uglify())
      .pipe(concat(‘all.min.js’))
      .pipe(gulp.dest(‘static-dest/js’));
});

gulp.task(‘styles’, [‘clean’], function(){
  gulp.src([‘static-src/css/*.css’])
      .pipe(minify())
      .pipe(md5(10))
      .pipe(gulp.dest(‘static-dest/css’));
});

var gulp = require(‘gulp’);

var del = require(‘del’);

var uglify = require(‘gulp-uglify’);

var concat = require(‘gulp-concat’);

var sourcemaps = require(‘gulp-sourcemaps’);

var md5 = require(‘gulp-md5-plus’);

var minify = require(‘gulp-minify-css’);

gulp.task(‘default’, [‘scripts’, ‘styles’]);

gulp.task(‘clean’, function(cb){

del([‘static-dest’], cb);

});

gulp.task(‘scripts’, [‘clean’], function(){

gulp.src([‘static-src/js/*.js’])

.pipe(uglify())

.pipe(concat(‘all.min.js’))

.pipe(gulp.dest(‘static-dest/js’));

});

gulp.task(‘styles’, [‘clean’], function(){

gulp.src([‘static-src/css/*.css’])

.pipe(minify())

.pipe(md5(10))

.pipe(gulp.dest(‘static-dest/css’));

});

我学习的结果如上，主要是三个任务，clean, scripts, styles。对于JS执行混淆，连接后写入目标目录。对于CSS执行最小化，增加MD5哈希后写入目标目录。暂时还未涉及修改html或者其他模板文件的静态文件替换（我加了gulp-replace依赖，但没用）。

总的来说，学习过程中gulp不是很复杂，虽然了解npm的使用花了点时间。前端工具的种类现在比以前要多很多，不过了解了这些工具的目的就不会有眼花缭乱的感觉了。接下来可能要了解下rails的asset pipeline，一直觉得rails的view部分很tricky，还是有必要了解下。