'use strict';
var gulp = require('gulp');
// browser sync
var browserSync = require('browser-sync');
var reload = browserSync.reload;
//rename
var rename = require('gulp-rename');
//sass
var sass = require('gulp-sass');
//add prefix
var autoprefixer = require('gulp-autoprefixer');
var cssnano = require('gulp-cssnano');
//compile sass
gulp.task('sass', function() {
gulp.src('src/sass/**/*.scss')
.pipe(sass()) //編譯sass文件1
.pipe(autoprefixer()) // 自動加前綴
.pipe(cssnano()) //優化css代碼
.pipe(rename({ extname: '.css' })) //更換名字
.pipe(gulp.dest('./src/css')); //放到css文件中
});
//html compress
var htmlmin = require('gulp-htmlmin');
gulp.task('html', function() {
gulp.src('./src/*.html')
.pipe(htmlmin({
collapseWhitespace: true, //壓縮html
removeComments: true, //清楚注釋
collapseBooleanAttributes: true, //省略布爾屬性的值
removeEmptyAttributes: true, //刪除所有空格作屬性值
minifyJS: true, //壓縮頁面JS
minifyCSS: true //壓縮頁面CSS
}))
.pipe(gulp.dest('./dist'))
.pipe(reload({
stream: true
}));
});
//js 合并 壓縮混淆
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
gulp.task('script', function() {
gulp.src('./src/js/*.js')
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist/js'))
.pipe(reload({
stream: true
}));
});
//深度壓縮 圖片
var imagemin = require('gulp-imagemin'),
pngquant = require('imagemin-pngquant'),
//當某些圖片文件發生改變時，只壓縮改變的圖片
cache = require('gulp-cache');
gulp.task('image', function() {
gulp.src('src/images/*.*')
.pipe(cache(imagemin({
progressive: true,
svgoPlugins: [{ removeViewBox: false }],
use: [pngquant()]
})))
.pipe(gulp.dest('dist/images'));
});
gulp.task('task', function() {
browserSync.init({
server: {
baseDir: './src/',
index: 'index.html'
},
open: 'external', //external 內網訪問 local 本地訪問（默認本地訪問）
port: 8081
});
gulp.watch('./src/js/*.js', ['script']);
gulp.watch('./src/*.html', ['html']);
gulp.watch('./src/sass/**/*.scss', ['sass']);
gulp.watch('./src/**/*.html').on('change', reload);
gulp.watch('./src/**/*.css').on('change', reload);
gulp.watch('./src/**/*.js').on('change', reload);
})
