## 一、功能說明 * 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')) }); ~~~