由於我們前面每加入一個 插件(plugin)
就要引入一次
會發現其實超級麻煩
而且會顯得程式碼非常冗長
所以 gulp-load-plugins 可以解決此問題
https://www.npmjs.com/package/gulp-load-plugins
那我們就介紹如何安裝與使用啦~~
npm install gulp-load-plugins
引入 const $ = require('gulp-load-plugins')();
但此套件只對 gulp開頭的 才會有效
autoprefixer 不屬於 gulp套件
屬於 postcss的延伸套件
加入 $
gulp.task('jade', function() {
gulp.src('./source/**/*.jade')
.pipe($.plumber())
.pipe($.jade({
pretty: true
}))
.pipe(gulp.dest('./public/'))
});
gulp.task('sass', function () {
return gulp.src('./source/scss/**/*.scss')
.pipe($.plumber())
.pipe($.sass().on('error', $.sass.logError))
.pipe($.postcss([autoprefixer()]))
.pipe(gulp.dest('./public/css'));
});
gulp.task('watch', function () {
gulp.watch('./source/scss/**/*.scss', ['sass']);
});
gulp.task('default',['jade','sass','watch']);
最後在終端機輸入 gulp
看是否有錯誤
這樣就大功告成啦
若有任何問題 或 內容有誤
都可以跟我說唷