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);
});