参考自：http://www.sheyilin.com/2016/02/gulp_introduce/
在原先基础上增加了less编译 es6转码资源地图等，修改了一部分的热刷新。
gulpfile.js文件
1 /*! 2 * gulp 3 * $ npm install gulp gulp-ruby-sass gulp-cached gulp-uglify gulp-rename gulp-concat gulp-notify gulp-filter gulp-jshint gulp-rev-append gulp-cssnano gulp-imagemin browser-sync gulp-file-include gulp-autoprefixer del --save-dev 4 */ 5 6 // Load plugins 7 var gulp = require('gulp'), // 必须先引入gulp插件 8 del = require('del'), // 文件删除 9 sass = require('gulp-sass'), // sass 编译 10 less = require('gulp-less'), // less 编译 11 sourcemaps = require('gulp-sourcemaps'),//确保本地已安装gulp-sourcemaps [cnpm install gulp-sourcemaps --save-dev] 12 cached = require('gulp-cached'), // 缓存当前任务中的文件，只让已修改的文件通过管道 13 uglify = require('gulp-uglify'), // js 压缩 14 rename = require('gulp-rename'), // 重命名 15 concat = require('gulp-concat'), // 合并文件 16 notify = require('gulp-notify'), // 相当于 console.log() 17 filter = require('gulp-filter'), // 过滤筛选指定文件 18 jshint = require('gulp-jshint'), // js 语法校验 19 rev = require('gulp-rev-append'), // 插入文件指纹（MD5） 20 cssnano = require('gulp-cssnano'), // CSS 压缩 21 imagemin = require('gulp-imagemin'), // 图片优化 22 browserSync = require('browser-sync'), // 保存自动刷新 23 connect = require('gulp-connect'),//热刷新 24 fileinclude = require('gulp-file-include'), // 可以 include html 文件 25 autoprefixer = require('gulp-autoprefixer'), // 添加 CSS 浏览器前缀 26 babel = require('gulp-babel'); //es6编译 28 29 // sass 30 gulp.task('sass', function() { 31 return gulp.src('src/sass/**/*.scss', {style: 'expanded'}) // 传入 sass 目录及子目录下的所有 .scss 文件生成文件流通过管道并设置输出格式 32 .pipe(cached('sass')) // 缓存传入文件，只让已修改的文件通过管道（第一次执行是全部通过，因为还没有记录缓存） 33 .pipe(autoprefixer('last 6 version')) // 添加 CSS 浏览器前缀，兼容最新的5个版本 34 .pipe(sass()) 35 .pipe(sourcemaps.init())//资源地图创建 36 .pipe(sourcemaps.write())//资源地图写入 37 .pipe(gulp.dest('dist/css')) // 输出到 dist/css 目录下（不影响此时管道里的文件流） 38 .pipe(rename({suffix: '.min'})) // 对管道里的文件流添加 .min 的重命名 39 .pipe(cssnano()) // 压缩 CSS 40 .pipe(gulp.dest('dist/css')) // 输出到 dist/css 目录下，此时每个文件都有压缩（*.min.css）和未压缩(*.css)两个版本 41 }); 42 // less 43 gulp.task('less', function() { 44 return gulp.src('src/less/**/*.less', {style: 'expanded'}) // 传入 sass 目录及子目录下的所有 .scss 文件生成文件流通过管道并设置输出格式 45 .pipe(cached('less')) // 缓存传入文件，只让已修改的文件通过管道（第一次执行是全部通过，因为还没有记录缓存） 46 .pipe(autoprefixer('last 6 version')) // 添加 CSS 浏览器前缀，兼容最新的5个版本 47 .pipe(less()) 48 .pipe(sourcemaps.init())//资源地图创建 49 .pipe(sourcemaps.write())//资源地图写入 50 .pipe(gulp.dest('dist/css'))//输出未压缩的css文件 51 .pipe(rename({suffix: '.min'})) // 对管道里的文件流添加 .min 的重命名 52 .pipe(cssnano()) // 压缩 CSS目录下，此时每个文件都有压缩（*.min.css）和未压缩(*.css)两个版本 53 .pipe(gulp.dest('dist/css')) // 输出到 dist/css 目录下（不影响此时管道里的文件流） 54 }); 55 // css （拷贝 *.min.css，常规 CSS 则输出压缩与未压缩两个版本） 56 gulp.task('css', function() { 57 return gulp.src('src/css/**/*.css') 58 .pipe(cached('css')) 59 .pipe(gulp.dest('dist/css')) // 把管道里的所有文件输出到 dist/css 目录 60 .pipe(filter(['**/*', '!**/*.min.css'])) // 筛选出管道中的非 *.min.css 文件 61 .pipe(autoprefixer({ 62 grid:true, 63 browsers:['last 6 versions'] 64 }) 65 ) 66 .pipe(connect.reload())//页面热刷新 67 .pipe(gulp.dest('dist/css')) // 把处理过的 css 输出到 dist/css 目录 68 .pipe(rename({suffix: '.min'})) 69 .pipe(cssnano()) 70 .pipe(gulp.dest('dist/css')) 71 }); 72 73 // styleReload （结合 watch 任务，无刷新CSS注入） 74 gulp.task('styleReload', ['less', 'css'], function() { 75 return gulp.src(['dist/css/**/*.css']) 76 .pipe(cached('style')) 77 .pipe(browserSync.reload({stream: true})); // 使用无刷新 browserSync 注入 CSS 78 }); 79 80 // script （拷贝 *.min.js，常规 js 则输出压缩与未压缩两个版本） 81 gulp.task('script', function() { 82 return gulp.src(['src/js/**/*.js']) 83 .pipe(cached('script')) 84 .pipe(gulp.dest('dist/js')) 85 .pipe(filter(['**/*', '!**/*.min.js'])) // 筛选出管道中的非 *.min.js 文件 86 // .pipe(jshint('.jshintrc')) // js的校验与合并，根据需要开启 87 // .pipe(jshint.reporter('default')) 88 // .pipe(concat('main.js')) 89 .pipe(connect.reload())//页面热刷新 90 .pipe(babel({ 91 presets: ['es2015'] 92 }))//es6转码 93 .pipe(gulp.dest('dist/js'))//输出js文件 94 .pipe(rename({suffix: '.min'})) 95 .pipe(uglify())// 压缩js 96 .pipe(gulp.dest('dist/js'))//输出压缩后的js文件 97 }); 98 99 // image 100 gulp.task('image', function() { 101 return gulp.src('src/img/**/*.{jpg,jpeg,png,gif}') 102 .pipe(cached('image')) 103 .pipe(imagemin({optimizationLevel: 3, progressive: true, interlaced: true, multipass: true})) 104 // 取值范围：0-7（优化等级）,是否无损压缩jpg图片，是否隔行扫描gif进行渲染，是否多次优化svg直到完全优化 105 .pipe(connect.reload())//页面热刷新 106 .pipe(gulp.dest('dist/img')) 107 }); 108 109 // html 编译 html 文件并复制字体 110 gulp.task('html', function () { 111 return gulp.src('src/*.html') 112 .pipe(fileinclude()) // include html 113 .pipe(rev()) // 生成并插入 MD5 114 .pipe(connect.reload())//页面热刷新 115 .pipe(gulp.dest('dist/')) 116 }); 117 118 // clean 清空 dist 目录 119 gulp.task('clean', function() { 120 return del('dist/**/*'); 121 }); 122 123 // build，关连执行全部编译任务 124 gulp.task('build', ['sass','less', 'css', 'script', 'image'], function () { 125 gulp.start('html'); 126 }); 127 128 // default 默认任务，依赖清空任务 129 gulp.task('default', ['clean'], function() { 130 gulp.start('build'); 131 }); 132 133 // watch 开启本地服务器并监听 134 gulp.task('watch', function() { 135 browserSync.init({ 136 server: { 137 baseDir: 'src' // 在 dist 目录下启动本地服务器环境，自动启动默认浏览器 138 } 139 }); 140 141 // 监控 SASS 文件，有变动则执行CSS注入 142 gulp.watch('src/sass/**/*.scss', ['styleReload']); 143 // 监控 LESS 文件，有变动则执行CSS注入 144 gulp.watch('src/less/**/*.less', ['styleReload']); 145 // 监控 CSS 文件，有变动则执行CSS注入 146 gulp.watch('src/css/**/*.css', ['styleReload']); 147 // 监控 js 文件，有变动则执行 script 任务 148 gulp.watch('src/js/**/*.js', ['script']); 149 // 监控图片文件，有变动则执行 image 任务 150 gulp.watch('src/img/**/*', ['image']); 151 // 监控 html 文件，有变动则执行 html 任务 152 gulp.watch('src/**/*.html', ['html']); 153 // 监控 dist 目录下除 css 目录以外的变动（如js，图片等），则自动刷新页面 154 gulp.watch(['dist/**/*', 'dist/css/**/*']).on('change', browserSync.reload); 155 });
package.json文件
{ "devDependencies": { "babel-core": "^6.26.0", "babel-preset-es2015": "^6.24.1", "browser-sync": "^2.18.13", "del": "^3.0.0", "gulp": "^3.9.1", "gulp-autoprefixer": "^4.0.0", "gulp-babel": "^7.0.0", "gulp-cached": "^1.1.1", "gulp-concat": "^2.6.1", "gulp-connect": "^5.0.0", "gulp-cssnano": "^2.1.2", "gulp-file-include": "^1.2.0", "gulp-filter": "^5.0.1", "gulp-font-spider": "^0.3.6", "gulp-imagemin": "^4.0.0", "gulp-jshint": "^2.0.4", "gulp-less": "^3.3.2", "gulp-notify": "^3.0.0", "gulp-rename": "^1.2.2", "gulp-replace": "^0.6.1", "gulp-rev-append": "^0.1.8", "gulp-ruby-sass": "^2.1.1", "gulp-sass": "^3.1.0", "gulp-sourcemaps": "^2.6.1", "gulp-uglify": "^3.0.0", "jshint": "^2.9.5", "yargs": "^10.0.3" } }