gulp构建整理

gulp构建工具

1、dev版  js检测+混淆、sass编译+压缩、HTML模块编译+压缩、图片压缩、版本管理等

2、build版本 监控+HTML模块化+js合并+server启动

gulpfile.js如下：

var gulp = require('gulp'),
    runSequence = require('run-sequence'),
    browserSync = require('browser-sync').create(),
    gulpif = require('gulp-if'),
    uglify = require('gulp-uglify'),
    sass = require('gulp-sass'),
    csslint = require('gulp-csslint'),
    rev = require('gulp-rev'),
    minifyCss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    stylish = require('jshint-stylish'),
    revCollector = require('gulp-rev-collector'),
    minifyHtml = require('gulp-minify-html'),
    autoprefixer = require('gulp-autoprefixer'),
    concat = require('gulp-concat'),
    httpProxy = require('http-proxy'),
    imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant'),
    imageminJpegtran = require('imagemin-jpegtran'),
    fileinclude = require('gulp-file-include');
var proxy = httpProxy.createProxyServer({});

var condition = true;

// 压缩图片
gulp.task('imagemin', () => {
    return gulp.src('dist/static/images/*')
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{
                removeViewBox: false
            }],
            use: [pngquant()]
        }))
        .pipe(imageminJpegtran({
            progressive: true
        })())
        .pipe(gulp.dest('dist/static/images'));
});


//检测CSS并sass
gulp.task('lintCss', function(){
    return gulp.src('src/static/sass/*.scss')
        // .pipe(csslint())
        // .pipe(csslint.reporter())
        // .pipe(csslint.failReporter())
        .pipe(sass())
        .pipe(gulp.dest('src/static/css'));
});

//检测JS
gulp.task('lintJs', function(){
    return gulp.src('src/static/js/*.js')
        //.pipe(jscs())   //检测JS风格
        .pipe(jshint({
            "undef": false,
            "unused": false
        }))
        //.pipe(jshint.reporter('default'))  //错误默认提示
        .pipe(jshint.reporter(stylish))   //高亮提示
        .pipe(jshint.reporter('fail'));
});

// 生成版本号
gulp.task('rev' , function(){
    return gulp.src(['src/static/*(css|doc|images|js|json)/*.*' , 'src/static/*(images|ueditor)/**/*.*'])
        .pipe(rev())
        .pipe(gulp.dest('dist/static'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('src/static/rev/all'));
});


// 压缩js并替换版本号
gulp.task('miniJs', function(){
    return gulp.src(['src/static/rev/**/*.json', 'dist/static/js/*.js'])
        .pipe(gulpif(
            condition, revCollector()
        ))
        .pipe(gulpif(
            condition, uglify()
        ))
        .pipe(gulp.dest('dist/static/js'));
});


// 压缩css并替换版本号
gulp.task('miniCss', function(){
    return gulp.src(['src/static/rev/**/*.json', 'dist/static/css/*.css'])
        .pipe(gulpif(
            condition, revCollector()
        ))
        .pipe(gulpif(
            condition, minifyCss({
                compatibility: 'ie7'
            })
        ))
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false,
            remove: false       
        }))
        .pipe(gulp.dest('dist/static/css'));
});


//压缩Html/更新引入文件版本
gulp.task('miniHtml', function () {
    return gulp.src(['src/static/rev/**/*.json', 'dist/*.html'])
        .pipe(gulpif(
            condition, revCollector()
        ))
        .pipe(gulpif(
            condition, minifyHtml({
                empty: true,
                spare: true,
                quotes: true
            })
        ))
        .pipe(gulp.dest('dist'));
});

gulp.task('fileinclude', function() {
    return gulp.src(['src/*.html'])
        .pipe(fileinclude({
          prefix: '@@',
          basepath: '@file'
        }))
        .pipe(rev())
        .pipe(gulp.dest('dist'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('src/static/rev/html'));
});

gulp.task('vendor', function() {
  return gulp.src([
      'src/static/vendor/jquery.min.js',
      'src/static/vendor/knockout.js',
      'src/static/vendor/knockout.viewmodel.min.js',
    ])
    .pipe(concat('vendor.js'))
    .pipe(gulp.dest('dist/static/js/'))
});

// Static server
gulp.task('browser-init', function() {
  browserSync.init({
    server: {
      baseDir: "dist",
    },
    port: "6789"
  });
});

gulp.task('watch', function() {
  gulp.watch("src/static/sass/*.*").on("change", function(callback) {
    runSequence(['lintCss'], ['rev'] ,function() {
      browserSync.reload();
    });

  });
  gulp.watch("src/static/js/*.*").on("change", function(callback) {
    runSequence('rev' ,  function() {
      browserSync.reload();
    });
  });
  gulp.watch("src/*.html").on("change", function(callback) {
    runSequence( 'fileinclude' ,  function() {
      browserSync.reload();
    });
  });
});

//开发构建
gulp.task('dev', function (done) {
    condition = false;
    runSequence(
         ['watch' , 'lintCss' , 'fileinclude'],
         ['vendor'],
         ['rev'],
         ['browser-init'],
    done);
});

gulp.task('build', function (done) {
    runSequence(
         ['lintCss' , 'lintJs' , 'fileinclude'],
         ['vendor'],
         ['rev'],
         ['miniCss', 'miniJs' , 'miniHtml' , 'imagemin'],
    done);
});



gulp.task('default', ['build']);

package.json如下：

{
  "name": "qinghuanweier",
  "version": "1.0.0",
  "description": "qinghuanweier",
  "main": "index.js",
  "private": true,
  "dependencies": {
    "gulp": "^3.9.1"
  },
  "devDependencies": {
    "browser-sync": "^2.11.1",
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.0",
    "gulp-file-include": "^0.13.7",
    "gulp-sass": "^2.2.0",
    "http-proxy": "^1.13.2",
    "glob": "^5.0.5",
    "gulp-autoprefixer": "^2.1.0",
    "gulp-csslint": "^0.1.5",
    "gulp-if": "^1.2.5",
    "gulp-jshint": "^1.11.2",
    "gulp-minify-css": "^1.2.0",
    "gulp-minify-html": "^1.0.4",
    "gulp-rev": "^5.1.0",
    "gulp-rev-collector": "^1.0.0",
    "gulp-uglify": "^1.2.0",
    "gulp-util": "^3.0.6",
    "jquery": "1.11.3",
    "jshint": "^2.8.0",
    "jshint-stylish": "^2.0.1",
    "run-sequence": "^1.0.2",
    "gulp-imagemin": "^2.4.0",
    "imagemin-jpegtran": "^4.3.2",
    "imagemin-pngquant": "^4.2.2"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "license": "ISC"
}

目录结构如下：

参考：https://github.com/shonny-ua/gulp-rev-collector