前言
gulpfile.js
前幾天寫了gulp的基礎(chǔ)自動(dòng)化構(gòu)建的api执虹。
gulp.src 文件源位置
gulp.task 構(gòu)建任務(wù)名和函數(shù)
gulp.dest 放置文件位置
gulp.watch 監(jiān)控
這次介紹下gulp的幾個(gè)常用插件和其基本配置：
gulp常用插件
注意: + "使用插件前要先安裝對(duì)應(yīng)插件 npm install 插件名字 --save-dev"
+ "如果構(gòu)建的任務(wù)沒有放在默認(rèn)任務(wù)default中 命令行執(zhí)行的時(shí)候 gulp 任務(wù)名"
+ "task中路徑都是與gulpfile放在同一級(jí)下"
+ "gulp.dest()指明的目錄可以自動(dòng)被創(chuàng)建"
js壓縮，合并聪全，重命名任務(wù)
let gulp = require('gulp');
let concat = require('gulp-concat'); // 合并
let uglify = require('gulp-uglify'); // 壓縮
let rename = require('gulp-rename'); // 重命名
let jshint = require('gulp-jshint'); // 注意需要同時(shí)安裝 jshint
gulp.task('scripts', function() { // 這個(gè)任務(wù)的名稱是 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() { // 任務(wù)名
gulp.src('sass/*.scss') // 目標(biāo) sass 文件
.pipe(sass()) // sass -> css
.pipe(prefixer('last 2 versions')) // 參數(shù)配置參考 <https://github.com/ai/browserslist>
.pipe(minify()) // 壓縮
.pipe(gulp.dest('css')) // 目標(biāo)目錄
.pipe(notify({message: 'done'}))
.pipe(concat('all.min.css')) // 合并
.pipe(gulp.dest('css')); // 目標(biāo)目錄
});
圖片壓縮
let gulp = require('gulp');
let imagemin = require('gulp-imagemin');
let cache = require('gulp-cache'); // 減少重復(fù)壓縮
gulp.task('images', function() {
gulp.src('src/images/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('dist/images/'));
});
監(jiān)控文件
gulp.task('watch', function() { // 指定任務(wù)名為 watch
gulp.watch('src/sass/a.scss', ['sass']);// 監(jiān)控 a.scss 文件呻纹，如果有修改，則執(zhí)行 sass 任務(wù)
});
刪除文件
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/'))
});
總結(jié)
除此之外還有很多插件可供安裝，如果引入插件很多可以嘗試使用 gulp-load-plugin模塊、還有borswer-sync等模塊眷唉，由于這方面我還沒有認(rèn)真看過所以這里就不詳細(xì)介紹了，如果個(gè)人在剛學(xué)gulp的話囤官，我推薦多敲幾遍gulpfile.js的配置文件冬阳，嘗試一些自動(dòng)化構(gòu)建自己的小項(xiàng)目，然后根據(jù)項(xiàng)目需求再引入其他插件使用或者使用模塊治拿。
