最近研究了一下gulp构建工具，发现使用起来比grunt顺手一些。（个人感受），以下是grunt和gulp构建方式和原理：

grunt

基于文件方式构建，会把文件先写到临时目录下，然后进行读文件，修改文件，写文件，，，读文件，修改文件，写文件..... 需要进行大量IO操作。

gulp

基于流（streaming）的方式构建，首先读取文件，编译压缩文件（流的方式），最终将结果生成到配置的文件目录下。

安装gulp

假设已经安装了node 和npm （淘宝的cnpm很适合国内使用）。

1、首页全局安装gulp。

1 npm install --global gulp

2、其次局部安装gulp。（注：局部安装是安装到你项目的根目录，这是很多教程没有清晰表明）

npm install gulp --save-dev

3、在项目根目录下创建一个名为 gulpfile.js 的文件

var gulp = require('gulp'); gulp.task('default', function() { // 将你的默认的任务代码放在这 });

4、运行gulp。（默认的名为 default 的任务（task）将会被运行，想要单独执行特定的任务（task），请输入 gulp <task> <othertask>）

gulp

合并和压缩JS、CSS文件

压缩JS，CSS文件需要引用如下组件：

gulp-minify-css: 压缩css
gulp-jshint: 检查js
gulp-uglify: 压缩js
gulp-concat: 合并文件
gulp-rename: 重命名文件
gulp-clean: 清空文件夹

gulp-notify:提示

安装组件项目目录，通过cd 进入项目的根目录，执行下边的npm安装组件

npm install gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-notify --save-dev

在上述 gulpfile.js 的文件里，写入：

gulp=require('gulp'), //gulp基础库 minifycss=require('gulp-minify-css'), //css压缩 concat=require('gulp-concat'), //合并文件 uglify=require('gulp-uglify'), //js压缩 rename=require('gulp-rename'), //文件重命名 jshint=require('gulp-jshint'), //js检查 notify=require('gulp-notify'); //提示 gulp.task('default',function(){ gulp.start('minifycss','minifyjs'); }); //css处理 gulp.task('minifycss',function(){ return gulp.src('htdocs/kunpeng/static/css/*.css') //设置css .pipe(concat('order_query.css')) //合并css文件到"order_query" .pipe(gulp.dest('dist/styles')) //设置输出路径 .pipe(rename({suffix:'.min'})) //修改文件名 .pipe(minifycss()) //压缩文件 .pipe(gulp.dest('dist/styles')) //输出文件目录 .pipe(notify({message:'css task ok'})); //提示成功 }); //JS处理 gulp.task('minifyjs',function(){ return gulp.src(['/static/js/juicer-min.js','/static/js/bootstrap.min.js','/static/js/bootstrap-datetimepicker.min.js','/static/js/order_query.js']) //选择合并的JS .pipe(concat('order_query.js')) //合并js .pipe(gulp.dest(''dist/js')) //输出 .pipe(rename({suffix:'.min'})) //重命名 .pipe(uglify()) //压缩 .pipe(gulp.dest('dist/js')) //输出 .pipe(notify({message:"js task ok"})); //提示 });

运行

gulp