Gulp 配置文件以及注意點

時間 2019-11-18

原文原文鏈接

// Load plugins
var gulp = require('gulp'),
    sass = require('gulp-sass'),                //sass
    sourcemaps = require('gulp-sourcemaps'),    //生成sass行數
    cssmin = require('gulp-clean-css'),         //壓縮css
    cssver = require('gulp-make-css-url-version'),
    autoprefixer = require('gulp-autoprefixer'),//補全前綴
    jshint = require('gulp-jshint'),            //js代碼校驗
    rename = require('gulp-rename'),            //文件重命名
    uglify = require('gulp-uglify'),            //壓縮js代碼
    concat = require('gulp-concat'),            //合併js文件
    notify = require('gulp-notify'),            //更改提醒
    browserSync = require('browser-sync'),      // 瀏覽器自動刷新
    reload = browserSync.reload;

// Styles任務
gulp.task('styles', function () {
    //編譯sass
    return gulp.src('dev/scss/*.scss')
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(autoprefixer())
        .pipe(cssver())
        .pipe(cssmin({
            keepSpecialComments: '*'
        }))
        .pipe(rename({suffix: '.min'}))
        .pipe(sourcemaps.write("maps"))
        .pipe(gulp.dest('assets/styles'))
        .pipe(notify({message: 'Styles task complete'}));
});

// Scripts任務
gulp.task('scripts', function () {
    //js代碼校驗
    return gulp.src('dev/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        //js代碼合併
        .pipe(concat('app.js'))
        //給文件添加.min後綴
        .pipe(rename({suffix: '.min'}))
        //壓縮腳本文件
        .pipe(uglify())
        //輸出壓縮文件到指定目錄
        .pipe(gulp.dest('assets/scripts'))
        //提醒任務完成
        .pipe(notify({message: 'Scripts task complete'}));
});

// 監視文件改動並從新載入
gulp.task('serve', function () {
    browserSync({
        server: {
            baseDir: './'
        }
    });
    gulp.watch(['assets/*', 'assets/**/*', 'assets/**/**/*'], {cwd: './'}, reload);
});

// Default task
gulp.task('default', function () {
    gulp.start('styles', 'scripts', 'serve', 'watch');
});

// Watch
gulp.task('watch', function () {
    // Watch .scss files
    gulp.watch(['dev/scss/*', 'dev/scss/**/*'], ['styles']);
    // Watch .js files
    gulp.watch('dev/js/*.js', ['scripts']);
});