gulp自动化方案

Posted 2020-10-19 我将枕中记忆抹去任岁月浮光掠影

这个自动化方案主要包括以下功能：

1. 编译less,压缩编译后的css,重命名文件,合并打包css文件

2. 编译es6,压缩编译后的js,将公共引入的第三方类库整体打包

3. 监听文件变化,自动化执行编译任务

4. 执行静态代码检查包括stylelint/htmlcs/eslint

主要功能就是以上这些，下面是gulpfile.js的配置:

/**
 * Created by [email protected] on 2017/7/4.
 */
//路径信息
var cssDest = ‘../assets/css‘,
    lessSrc = ‘../assets/css/*.less‘,
    cssSrc = ‘../assets/css/*.css‘,
    jsSrc = ‘../assets/js/demo/*.js‘,
    jsDest = ‘../assets/js/demo‘,
    appjs = ‘../assets/js/demo/app.js‘
    htmlSrc = ‘../html/**/*.html‘;

//引用包
var gulp = require(‘gulp‘),
    less = require(‘gulp-less‘),
    cssmin = require(‘gulp-minify-css‘),
    concat = require(‘gulp-concat‘),
    rename = require(‘gulp-rename‘),
    notify = require(‘gulp-notify‘),
    uglify = require(‘gulp-uglify‘),
    babel = require(‘gulp-babel‘),
    es2015 = require(‘babel-preset-es2015‘),
    stylelint = require(‘gulp-stylelint‘),
    stylelfmt = require(‘gulp-stylefmt‘),
    checkStyleFormatter = require(‘./lib/checkstyle-formatter‘),
    htmlcs = require(‘hny-gulp-htmlcs‘),
    errorLevel = require(‘./config/errlevel‘),
    eslint = require(‘gulp-eslint‘),
    fs = require(‘fs‘),
    browserify = require(‘browserify‘),
    source = require(‘vinyl-source-stream‘),
    babelify = require(‘babelify‘);

/*
*   编译部分
* **/
//编译less文件
gulp.task(‘less‘,function(){
    gulp.src(lessSrc)
        .pipe(less())
        .pipe(gulp.dest(cssDest))
});
//格式化css文件
gulp.task(‘css‘,[‘less‘],function(){
    gulp.src(cssSrc)
        .pipe(cssmin())
        .pipe(concat(‘main.css‘))
        .pipe(gulp.dest(cssDest))
});
//编译es6
gulp.task(‘js‘,function(){
    gulp.src(jsSrc)
        .pipe(babel({
            presets:[es2015]
        }))
        .pipe(rename({suffix: ‘.min‘}))
        .pipe(uglify())
        .pipe(gulp.dest(jsDest))
});
//  引入部分
gulp.task(‘browserify‘, [‘js‘],function () {
    var b = browserify({
        entries: appjs,
    })
    .transform(babelify.configure({
        presets: [es2015]
    }));
    return b.bundle()
        .pipe(source(‘bundle.js‘))
        .pipe(gulp.dest(‘../assets/js‘))
        .pipe(notify({message:‘browserify task is success‘}));
});

/**
 *      静态代码检查部分
 * */
gulp.task(‘csscheck‘, function() {
    var checkstyleXML = ‘stylecheck.xml‘;
    return gulp.src(cssSrc)
        // 按照规则处理代码
        .pipe(stylelfmt({ configFile: ‘./config/.stylefmtrc‘ }))
        // 按照规则check代码
        .pipe(stylelint({
            configFile: ‘./config/.stylelintrc‘,
            failAfterError: false,
            // 报告路径
            reportOutputDir: ‘./reports‘,
            // 输出结果
            reporters: [
                {formatter: ‘verbose‘, console: true},
                {formatter: checkStyleFormatter, save: checkstyleXML}
            ]
        }));
});

gulp.task(‘htmlcheck‘, function() {
    var checkstyleXML = ‘htmlcs.xml‘;
    return gulp.src(htmlSrc)
        .pipe(htmlcs({
                configFile: ‘./config/.htmlcsrc‘,
                errorLevel: errorLevel,
                failAfterError: false,
                // 报告路径
                reportOutputDir: ‘./reports‘,
                // 输出结果
                reporters: [
                    { formatter: ‘verbose‘,console: true},
                    { formatter: checkStyleFormatter,save: checkstyleXML}
                ]
            })
        );
});

gulp.task(‘jseslint‘, function() {
    var checkstyleXML = ‘Elint.xml‘;
    return gulp.src([jsSrc])
        // 按照规则处理代码
        .pipe(eslint({
            configFile: ‘./config/.eslintrc.json‘,
            reportOutputDir: ‘./reports‘
        }))
        .pipe(eslint.format(‘checkstyle‘,fs.createWriteStream(‘reports/‘+checkstyleXML)));
});

/**
 *  监听编译部分
 * */
gulp.task(‘watch‘,function(){
    gulp.watch(lessSrc,[‘css‘]);
    gulp.watch(jsSrc,[‘browserify‘]);
});

//开发完毕打包
gulp.task(‘run‘, [‘css‘, ‘browserify‘]);
//自检
gulp.task(‘checkstyle‘,[‘csscheck‘,‘htmlcheck‘,‘jseslint‘]);

接下来是package.json的信息：

{
  "name": "gulp-task",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "gulp run",
    "check": "gulp checkstyle",
    "watch": "gulp watch"
  },
  "author": "[email protected]",
  "license": "ISC",
  "devDependencies": {
    "babel": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babelify": "^7.3.0",
    "browserify": "^14.4.0",
    "globby": "^6.1.0",
    "gulp": "^3.9.1",
    "gulp-babel": "^6.1.2",
    "gulp-concat": "^2.6.1",
    "gulp-eslint": "^3.0.1",
    "gulp-less": "^3.3.2",
    "gulp-minify-css": "^1.2.4",
    "gulp-notify": "^3.0.0",
    "gulp-rename": "^1.2.2",
    "gulp-stylefmt": "^1.0.0",
    "gulp-stylelint": "^3.4.0",
    "gulp-uglify": "^3.0.0",
    "gulp-watch": "^4.3.11",
    "hny-gulp-htmlcs": "^1.0.4",
    "stylelint": "^7.9.0",
    "vinyl-source-stream": "^1.1.0"
  }
}

来自：https://segmentfault.com/a/1190000010138466