## 一、功能说明 * less模块分离 * babel转es6->es5 * 文件修改监听 * 打包处理 ## 二、less目录结构  less/index.less ~~~ @import url(modules/_common.less); @import url(modules/_button.less); ~~~ 注：不需要输出的CSS的，文件名要以下划线 _ 为前缀，通过 @import 包含的方式调用 ## 三、package.json依赖 ~~~ { "devDependencies": { "babel-core": "^6.26.3", "babel-preset-es2015": "^6.24.1", "gulp": "^3.9.1", "gulp-babel": "^7.0.1", "gulp-clean": "^0.4.0", "gulp-clean-css": "^3.10.0", "gulp-css-spriter": "^0.4.0", "gulp-htmlmin": "^4.0.0", "gulp-imagemin": "^4.1.0", "gulp-less": "^4.0.1", "gulp-remove-empty-lines": "^0.1.0", "gulp-replace": "^1.0.0", "gulp-sequence": "^1.0.0", "gulp-uglify": "^3.0.0", "less-plugin-autoprefix": "^2.0.0" } } ~~~ ## 四、gulpfile.js使用 ~~~ var gulp = require('gulp'); var babel = require('gulp-babel'); var gulpSequence = require('gulp-sequence'); // 同步执行 var clean = require('gulp-clean'); // 清除目录内容 // js相关 var uglify = require('gulp-uglify'); // 混淆压缩 // css相关 var less = require('gulp-less'); // less转css var LessAutoprefix = require('less-plugin-autoprefix'); // 补浏览器前缀 var cleanCSS = require('gulp-clean-css'); // css压缩 var spriter = require('gulp-css-spriter'); // css图片合成 // image相关 var imagemin = require('gulp-imagemin'); // 图片压缩 // html相关 var htmlmin = require('gulp-htmlmin'); // html压缩 var removeEmptyLines = require('gulp-remove-empty-lines'); // 清除空白行 var replace = require('gulp-replace'); // 替换文件名 // 删除dist目录 gulp.task('clean', function() { return gulp.src('./dist', {read: false}).pipe(clean({force: true})); }); // js处理 gulp.task('js', function() { return gulp.src('./src/js/*.js') .pipe(babel({ presets: ['es2015'] })) .pipe(uglify({mangle: true, compress: false})) .on('error', function (err) { console.log(err.toString()); }) .pipe(gulp.dest('./dist/js')); }); gulp.task('js-lang', function() { return gulp.src('./src/js/lang/*.js') .pipe(uglify({mangle: true, compress: false})) .on('error', function (err) { console.log(err.toString()); }) .pipe(gulp.dest('./dist/js/lang')); }); // css处理 gulp.task('css', function() { return gulp.src('./src/css/*.css') .pipe(cleanCSS()) .pipe(gulp.dest('./dist/css')); }); // less处理 gulp.task('less', function() { return gulp.src('./src/less/*.less') .pipe(less({ plugins: [ new LessAutoprefix({browsers: ['last 2 versions']}) ] })) .pipe(spriter({ spriteSheet: './dist/images/spritesheet.png', pathToSpriteSheetFromCSS: '../images/spritesheet.png' })) .pipe(cleanCSS()) .pipe(gulp.dest('./dist/css')); }); // image处理 gulp.task('image', function() { return gulp.src('./src/images/*') .pipe(imagemin()) .pipe(gulp.dest('./dist/images')); }); // html处理 gulp.task('html', function() { var options = { removeComments: true, // 清除HTML注释 collapseWhitespace: false, // 压缩HTML collapseBooleanAttributes: true, // 省略布尔属性的值 <input checked="true"/> ==> <input /> removeEmptyAttributes: true, // 删除所有空格作属性值 <input id="" /> ==> <input /> removeScriptTypeAttributes: true, // 删除<script>的type="text/javascript" removeStyleLinkTypeAttributes: true, // 删除<style>和<link>的type="text/css" minifyJS: true, // 压缩页面JS minifyCSS: true // 压缩页面CSS }; return gulp.src('src/index.html') .pipe(replace(/less\/(\w+)\.less/g, 'css/$1.css')) // 替换名称 .pipe(removeEmptyLines({removeComments: true})) // 删除空白行 .pipe(htmlmin(options)) // 压缩 .pipe(gulp.dest('./dist')); }); // copy vendor gulp.task('copy-vendor', function() { return gulp.src('./src/js/vendor/**/*') .pipe(gulp.dest('./dist/js/vendor')) }); // 默认任务 gulp.task('default', function(callback) { return gulpSequence('js', 'js-lang', 'css', 'less', 'image', 'html', 'copy-vendor')(callback); }); // 监听 gulp.task('watch',function(){ gulp.watch('./src/less/**/*.less', ['less']); gulp.watch('./src/index.html', ['html']); gulp.watch('./src/css/*.css', ['css']); gulp.watch('./src/js/*.js', ['js']); gulp.watch('./src/js/lang/*.js', ['js-lang']); }); ~~~ ## 五、附加 1、可以根据项目需要，把中文转成unicode 安装（https://www.npmjs.com/package/gulp-chinese2unicode） ~~~ npm install --save-dev gulp-chinese2unicode ~~~ 使用 ~~~ gulp.task('js-min', function() { return gulp.src('./public/js/**/*.js') .pipe(uglify({mangle: true, compress: false})) .pipe(chinese2unicode()) .on('error', function (err) { console.log(err.toString()); }) .pipe(gulp.dest('./public/dist/js')) }); ~~~ 2、排除文件，使用 ! 开头 ~~~ gulp.task('copy-dir', function() { return gulp.src([ './js/**', '!./js/*.js' ]) .pipe(gulp.dest('./build/js')) }); ~~~