一. gulp和grunt对比
grunt目前的工作流程：读文件、修改文件、写文件——读文件、修改文件、写文件——...
gulp目前的工作流程：读取文件——修改文件——修改文件...——写文件
二. grunt存在问题
1、插件职能不够单一
2、插件完成了本不该由插件完成的事情（这个我有点迷糊，为什么说是 things don't need to be plugins？）
3、配置过于复杂
4、由于糟糕的流程控制导致的临时文件/目录
三. gulp安装
1、首先全局安装gulp命令行工具（相当于grunt-cli）
npm install -g gulp
2、然后，在项目下安装gulp（相当于grunt）、gulp-uglify
npm install --save-dev gulp gulp-uglify
3、在项目根目录下创建 gulpfile.js
var gulp = require('gulp'),
uglify = require('gulp-uglify');
gulp.task('default', function(){
gulp.src('src/app.js')
.pipe(uglify())
.pipe(gulp.dest('dist/'));
});
4、运行gulp
gulp
四. 项目代码
var gulp = require('gulp'),
jshint = require('gulp-jshint'),
minifycss = require('gulp-minify-css'),
minifyhtml = require('gulp-minify-html'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
del = require('del'),
replace = require('gulp-replace'),
gulpif = require('gulp-if'),
htmlreplace = require('gulp-html-replace'),
doCompression = false,
doReplaceENV = false,
css_version = '111',
js_version = '111',
simu_version = '111';
//转移图片
gulp.task('mvimages',function(){
return gulp.src('simusrc/images/*')
.pipe(gulp.dest('simu/images'));
});
//压缩css
gulp.task('minifycss',function(){
return gulp.src('simusrc/**/*.css')
.pipe(gulpif(doCompression, minifycss()))
.pipe(gulp.dest('simu'));
});
//合并js
gulp.task('concatjs',function(){
return gulp.src(['simusrc/js/dahuo_core.js', 'simusrc/js/webtools.js', 'simusrc/js/config.js',
'simusrc/js/offsetslider.js', 'simusrc/js/touchslider.js', 'simusrc/js/search.js'])
.pipe(jshint())
.pipe(gulpif(doReplaceENV, replace("var MainENV = MainConfig['localtest']", "var MainENV = MainConfig['prod']")))
.pipe(replace('SIMU_PATH_VERSION', simu_version))
.pipe(concat('app_build.js'))
.pipe(gulpif(doCompression, rename({suffix:'.min'})))
.pipe(gulpif(doCompression, uglify()))
.pipe(gulp.dest('simu/js/'));
});
//压缩js
gulp.task('minifyjs',function(){
return gulp.src(['simusrc/**/*.js', '!simusrc/**/*.min.js'])
.pipe(jshint())
.pipe(gulpif(doCompression, replace('webchat.js?JS_VERSION', 'webchat.min.js?version=' + js_version)))
.pipe(gulpif(!doCompression, replace('webchat.js?JS_VERSION', 'webchat.js?version=' + js_version)))
.pipe(gulpif(doReplaceENV, replace("var MainENV = MainConfig['localtest']", "var MainENV = MainConfig['prod']")))
.pipe(replace('SIMU_PATH_VERSION', simu_version))
.pipe(gulpif(doCompression, rename({suffix:'.min'})))
.pipe(gulpif(doCompression, uglify()))
.pipe(gulp.dest('simu'));
});
//转移min.js
gulp.task('getminjs',function(){
return gulp.src(['simusrc/**/*.min.js'])
.pipe(jshint())
.pipe(gulp.dest('simu'));
});
//html JS替换 JS,CSS版本号
gulp.task('minifyhtml',function(){
return gulp.src('simusrc/**/*.html')
.pipe(replace(/<script.+dahuo_core\.js.+/g, ''))
.pipe(replace(/<script.+webtools\.js.+/g, ''))
.pipe(replace(/<script.+offsetslider\.js.+/g, ''))
.pipe(replace(/<script.+touchslider\.js.+/g, ''))
.pipe(replace(/<script.+search\.js.+/g, ''))
.pipe(replace(/<script.+src="(.+)config\.js.+/g, '<script type="text/javascript" src="$1app_build.js?JS_VERSION"></script>'))
.pipe(gulpif(doCompression, replace(/(\.min)?\.js\?JS_VERSION/g, '.min.js?version=' + js_version)))
.pipe(gulpif(!doCompression, replace('js?JS_VERSION', 'js?version=' + js_version)))
.pipe(replace('css?CSS_VERSION', 'css?version=' + css_version))
.pipe(gulp.dest('simu'));
});
gulp.task('getmanifest',function(){
return gulp.src(['simusrc/**/*.manifest', 'simusrc/**/manifest.*'])
.pipe(replace(/.+dahuo_core\.js.+/g, ''))
.pipe(replace(/.+webtools\.js.+/g, ''))
.pipe(replace(/.+offsetslider\.js.+/g, ''))
.pipe(replace(/.+touchslider\.js.+/g, ''))
.pipe(replace(/.+search\.js.+/g, ''))
.pipe(replace(/(.+)config\.js.+/g, '$1app_build.js?JS_VERSION'))
.pipe(gulpif(doCompression, replace(/(\.min)?\.js\?JS_VERSION/g, '.min.js?version=' + js_version)))
.pipe(gulpif(!doCompression, replace('js?JS_VERSION', 'js?version=' + js_version)))
.pipe(replace('css?CSS_VERSION', 'css?version=' + css_version))
.pipe(replace('html?SIMU_PATH_VERSION', 'html?version=' + simu_version))
.pipe(gulp.dest('simu'));
});
//清除目录
gulp.task('clean',function(cb){
del(['simu/**/*.css', 'simu/**/*.js', 'simu/images', 'simu/**/*.html', 'simu/**/*.manifest', 'simu/**/manifest.*'], cb);
});
//开始任务
gulp.task('default', ['clean'], function(){
gulp.start('mvimages', 'minifycss', 'concatjs', 'minifyjs', 'getminjs', 'minifyhtml', 'getmanifest');
});
gulp.task('ppe', ['clean'], function(){
doCompression = true;
doReplaceENV = true;
gulp.start('mvimages', 'minifycss', 'concatjs', 'minifyjs', 'getminjs', 'minifyhtml', 'getmanifest');
});
gulp.task('release', ['clean'], function(){
doCompression = true;
doReplaceENV = true;
gulp.start('mvimages', 'minifycss', 'concatjs', 'minifyjs', 'getminjs', 'minifyhtml', 'getmanifest');
});