这个自动化方案主要包括以下功能:
-
编译less,压缩编译后的css,重命名文件,合并打包css文件
-
编译es6,压缩编译后的js,将公共引入的第三方类库整体打包
-
监听文件变化,自动化执行编译任务
-
执行静态代码检查包括
stylelint
/htmlcs
/eslint
主要功能就是以上这些,下面是gulpfile.js
的配置:
/** * Created by syzx9801@163.com 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": "syzx9801@163.com", "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