Gulp脚本

var gulp = require('gulp');
// sass 插件

var sass = require('gulp-sass');

// 自动同步浏览器插件

var browserSync = require('browser-sync');

// 合并文件的插件

var useref = require('gulp-useref');

// 压缩js插件

var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');

// 压缩css插件

var cssnano = require('gulp-cssnano');

// 压缩图片插件

var imagemin = require('gulp-imagemin');

// 压缩png图片的插件

var pngquant = require('imagemin-pngquant');

// 缓存插件，可以加快编译速度

var cache = require('gulp-cache');

// 删除文件插件

var del = require('del');

// 同步运行任务插件

var runSequence = require('run-sequence');

// 给css3属性添加浏览器前缀插件

var autoprefixer = require('gulp-autoprefixer');
// sourcemap 插件
var sourcemaps = require('gulp-sourcemaps');
var lazypipe = require('lazypipe');

// 合成sprite图片插件

var spritesmith = require('gulp.spritesmith');
var imageminOptipng = require('imagemin-optipng');

// 编译sass文件，添加css3属性浏览器前缀，reload 浏览器

gulp.task('sass', function () {
 return gulp.src('./src/scss/**/*.scss')
     .pipe(sass())
     .pipe(autoprefixer())
     .pipe(gulp.dest('./src/css'))
     .pipe(browserSync.reload({stream: true}));
});

// 自动更新浏览器任务

gulp.task('browserSync', function () {
 browserSync.init({
     server: {
         baseDir: 'src'
     }
 })
});

// 合并文件任务
// 在html设置需要合并的文件：
// <!--build:js js/flexible.min.js -->
// <script src="js/flexible_css.js"></script>
// <script src="js/flexible.js"></script>
// <!-- endbuild-->
// 执行任务后，会编译成 ： <script src="js/flexible.min.js"></script>
// 同时会把 flexible_css.js 和 flexible.js 合并成 flexible.min.js

gulp.task('useref', function () {
 return gulp.src('./src/*.html')
     .pipe(useref({}, lazypipe().pipe(sourcemaps.init, { loadMaps: true })))
     .pipe(gulpIf('*.js', uglify()))
     .pipe(gulpIf('*.css', cssnano()))
     .pipe(sourcemaps.write('maps'))
     .pipe(gulp.dest('dist'));
});

// 图片压缩任务

gulp.task('images', function () {
 return gulp.src('./src/img/**/*.+(png|jpg|gif|svg)')
     .pipe(imagemin({
         progressive: true,
         svgoPlugins: [{removeViewBox: false}],
         use: [pngquant()]
     }))
     .pipe(gulp.dest('dist/img'));
});

// 合并sprite图任务

gulp.task('sprite', function () {
 var spriteData = gulp.src('./src/img/sprite/**/*.png')
     .pipe(spritesmith({
         imgName: 'sprite.png',
         cssName: 'sprite.scss',
         imgPath: '../img/sprite/sprite.png',
         cssFormat: 'scss',
         padding: 10
     }));
 return spriteData.pipe(gulp.dest('./src/img/sprite/'))
});

// 删除build目录

gulp.task('clean:dist', function () {
 return del.sync('dist');
});

// 清除缓存

gulp.task('cache:clear', function (cb) {
 return cache.clearAll(cb)
});

// 监控任务，当有sass文件，html文件，js文件改动的时候，刷新浏览器

gulp.task('watch', ['browserSync', 'sass'], function () {
 gulp.watch('./src/scss/**/*.scss', ['sass']);
 gulp.watch('./src/*.html', browserSync.reload);
 gulp.watch('./src/js/**/*.js', browserSync.reload);
});

// 构建最终输出文件

gulp.task('build', function (callback) {
 runSequence('clean:dist', ['sass', 'useref', 'images', 'fonts'], callback);
});

// gulp 默认执行任务

gulp.task('default', function (callback) {
 runSequence(['sass', 'browserSync', 'watch'], callback);
});