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