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