glup 構建一個完整的jquery項目

1-gulp目錄說明：

glup dev 開發環境
  

var gulp = require('gulp');
var babel = require("gulp-babel");
var connect = require('gulp-connect'); // 服務
var runSequence = require('run-sequence');
var del = require('del')
var rev = require('gulp-rev');                                  //- 對文件名加MD5後綴
var revCollector = require('gulp-rev-collector');               //- 路徑替換
function dev () {
    gulp.task('revCss', function() {                                //- 創建一個名爲 concat 的 task
        return gulp.src('./targetFile/ceshi.css')    //- 需要處理的css文件，放到一個字符串數組裏
            .pipe(rev())                                            //- 文件名加MD5後綴
            .pipe(gulp.dest('./dist'))                              //- 輸出文件本地
            .pipe(rev.manifest())                                   //- 生成一個rev-manifest.json
            .pipe(gulp.dest('./rev/css'));                             //- 將 rev-manifest.json 保存到 rev 目錄內
    });
    gulp.task('revJs', function() {                                //- 創建一個名爲 concat 的 task
        return gulp.src('./targetFile/ceshi.js')    //- 需要處理的js文件，放到一個字符串數組裏
            .pipe(babel())                          // 轉換es5
            .pipe(rev())                                            //- 文件名加MD5後綴
            .pipe(gulp.dest('./dist'))                              //- 輸出文件本地
            .pipe(rev.manifest())                                   //- 生成一個rev-manifest.json
            .pipe(gulp.dest('./rev/js'));                             //- 將 rev-manifest.json 保存到 rev 目錄內
    });
    gulp.task('revHtml', function() {
        return gulp.src(['./rev/*/*.json', './targetFile/*.html'])   //- 讀取 rev-manifest.json 文件以及需要進行css名替換的文件
            .pipe(revCollector())                                   //- 執行文件內css名的替換
            .pipe(gulp.dest('./dist/'))                     //- 替換後的文件輸出的目錄
            .pipe(connect.reload());
    });
    gulp.task('clean', function(cb) {
        return del(['./dist/*'], cb)
    });
    // md5版本控制
    gulp.task('md5', function (done) {
        condition = false;
        runSequence(
            ['clean'],
            ['revCss'],
            ['revJs'],
            ['revHtml'],
            done
        );
    });
    gulp.task('reloadHtml', function (done) {
      condition = false;
        runSequence(
            ['clean'],
            ['revCss'],
            ['revJs'],
            ['revHtml'],
            done
        );
    });
    gulp.task('watch', function () {
      gulp.watch(['./targetFile/*.css'], ['reloadHtml']);
      gulp.watch(['./targetFile/*.js'], ['reloadHtml']);
      gulp.watch(['./targetFile/*.html'], ['reloadHtml']);
    });
    //啓動服務
    gulp.task('connect', function() {
      connect.server({
        root: 'dist',
        port: 8888,
        livereload: true
      });
    });
    // gulp.task('default', ['revHtml', 'revCss']);
    gulp.task('dev', ['md5', 'connect', 'watch']);
}
module.exports = dev

glup build 線上環境

var gulp = require('gulp');
var replace = require('gulp-replace'); // 字符串替換
var babel = require("gulp-babel");
var cleanCSS = require('gulp-clean-css');         // css 壓縮
var uglify = require('gulp-uglify');              // js壓縮
var runSequence = require('run-sequence');
var del = require('del')
var rev = require('gulp-rev');                                  //- 對文件名加MD5後綴
var revCollector = require('gulp-rev-collector');               //- 路徑替換
var configPath = require('./gulp.config.js');
console.log(configPath)
function build () {
    gulp.task('collectorImg', function() {
        return gulp.src(['./rev/img/*.json', './targetFile/static/css/*'])   //- 讀取 rev-manifest.json 文件以及需要進行img名替換的文件
        .pipe(revCollector())                                   //- 執行文件內img名的替換
        .pipe(gulp.dest('./dist/static/css'))
    });
    gulp.task('revCss', ['collectorImg'], function() {                                //- 創建一個名爲 concat 的 task
        return gulp.src('./dist/static/css/*.css')    //- 需要處理的css文件，放到一個字符串數組裏
            .pipe(replace('/static/img', configPath.cdnUrlImg))
            .pipe(cleanCSS())                                       // css 壓縮
            .pipe(rev())                                            //- 文件名加MD5後綴
            .pipe(gulp.dest('./dist/static/css'))                              //- 輸出文件本地
            .pipe(rev.manifest())                                   //- 生成一個rev-manifest.json
            .pipe(gulp.dest('./rev/css'));                             //- 將 rev-manifest.json 保存到 rev 目錄內
    });
    gulp.task('revJs', function() {                                //- 創建一個名爲 concat 的 task
        return gulp.src('./targetFile/static/js/*.js')    //- 需要處理的js文件，放到一個字符串數組裏
            // .pipe(babel())                          // 轉換es5
            .pipe(rev())                                            //- 文件名加MD5後綴
            .pipe(uglify())                                         // js 壓縮
            .pipe(gulp.dest('./dist/static/js'))                              //- 輸出文件本地
            .pipe(rev.manifest())                                   //- 生成一個rev-manifest.json
            .pipe(gulp.dest('./rev/js'));                             //- 將 rev-manifest.json 保存到 rev 目錄內
    });
    gulp.task('revImg', function() {
        return gulp.src('./targetFile/static/img/**')
            .pipe(rev())
            .pipe(gulp.dest('./dist/static/img'))
            .pipe(rev.manifest())
            .pipe(gulp.dest('./rev/img'));
    })
    gulp.task('revHtml', function() {
        return gulp.src(['./rev/*/*.json',  configPath.targetHtm])   //- 讀取 rev-manifest.json 文件以及需要進行css名替換的文件
            .pipe(replace('/static/img', configPath.cdnUrlImg))
            .pipe(replace('/static/css', configPath.cdnUrlCss))
            .pipe(replace('/static/js', configPath.cdnUrlJs))
            .pipe(replace('/static/plugin', configPath.cdnUrlPlugin))
            .pipe(revCollector())                                   //- 執行文件內css名的替換
            .pipe(gulp.dest('./dist/htm/'))                     //- 替換後的文件輸出的目錄
    });
    gulp.task('clean', function(cb) {
        return del(['./dist/*'], cb)
    });
    // md5版本控制
    gulp.task('md5', function (done) {
        condition = false;
        runSequence(
            ['clean'],
            ['revImg'],
            ['revCss'],
            ['revJs'],
            ['revHtml'],
            done
        );
    });
    // gulp.task('default', ['revHtml', 'revCss']);
    gulp.task('build', ['md5']);
}
module.exports = build