gulp安装和使用简介

一. 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');
});