前言
gulpfile.js
前幾天寫了gulp的基礎自動化構建的api。
gulp.src 文件源位置
gulp.task 構建任務名和函數
gulp.dest 放置文件位置
gulp.watch 監控
這次介紹下gulp的幾個常用插件和其基本配置：
gulp常用插件
注意: + "使用插件前要先安裝對應插件 npm install 插件名字 --save-dev"
+ "如果構建的任務沒有放在默認任務default中 命令行執行的時候 gulp 任務名"
+ "task中路徑都是與gulpfile放在同一級下"
+ "gulp.dest()指明的目錄可以自動被創建"
js壓縮，合并，重命名任務
let gulp = require('gulp');
let concat = require('gulp-concat'); // 合并
let uglify = require('gulp-uglify'); // 壓縮
let rename = require('gulp-rename'); // 重命名
let jshint = require('gulp-jshint'); // 注意需要同時安裝 jshint
gulp.task('scripts', function() { // 這個任務的名稱是 scripts
gulp.src('src/js/*.js') // 將 src/js/ 目錄下的所有 js 文件合并
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(concat('all.js')) // 指定合并后的文件名為 all.js
.pipe(gulp.dest('dist/js/')) // 保存合并后的文件
.pipe(uglify()) // 壓縮
.pipe(rename('all.min.js')) // 重命名
.pipe(rename({suffix: '.min'})) // 和上一行等效
.pipe(gulp.dest('dist/js/'));
});
sass編譯
let gulp = require('gulp');
let sass = require('gulp-sass'); // sass -> css
let prefixer = require('gulp-autoprefixer'); // 增加前綴
let minify = require('gulp-minify-css'); // css 壓縮
let notify = require('gulp-notify'); // 打印提醒語句
let concat = require('gulp-concat'); // 合并
// 編譯Sass
gulp.task('css', function() { // 任務名
gulp.src('sass/*.scss') // 目標 sass 文件
.pipe(sass()) // sass -> css
.pipe(prefixer('last 2 versions')) // 參數配置參考 <https://github.com/ai/browserslist>
.pipe(minify()) // 壓縮
.pipe(gulp.dest('css')) // 目標目錄
.pipe(notify({message: 'done'}))
.pipe(concat('all.min.css')) // 合并
.pipe(gulp.dest('css')); // 目標目錄
});
圖片壓縮
let gulp = require('gulp');
let imagemin = require('gulp-imagemin');
let cache = require('gulp-cache'); // 減少重復壓縮
gulp.task('images', function() {
gulp.src('src/images/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('dist/images/'));
});
監控文件
gulp.task('watch', function() { // 指定任務名為 watch
gulp.watch('src/sass/a.scss', ['sass']);// 監控 a.scss 文件，如果有修改，則執行 sass 任務
});
刪除文件
let gulp = require('gulp');
let clean = require('gulp-clean');
gulp.task('clean', function() {
return gulp.src(['dist/js/*', 'dist/sass/*', 'dist/images/*'], {read: false})
.pipe(clean());
});
ES6->ES5
安裝插件 npm install gulp-babel babel-preset-es2015 --save-dev
let gulp = require('gulp');
let babel = require('gulp-babel');
gulp.task('scripts', function() {
gulp.src('src/js/a.js')
.pipe(babel({ // es6 -> es5
presets: ['es2015']
}))
.pipe(gulp.dest('dist/js/'))
});
總結
除此之外還有很多插件可供安裝，如果引入插件很多可以嘗試使用 gulp-load-plugin模塊、還有borswer-sync等模塊，由于這方面我還沒有認真看過所以這里就不詳細介紹了，如果個人在剛學gulp的話，我推薦多敲幾遍gulpfile.js的配置文件，嘗試一些自動化構建自己的小項目，然后根據項目需求再引入其他插件使用或者使用模塊。
