Gulp.js 是一個自動化構(gòu)建工具册着，開發(fā)者可以使用它在項目開發(fā)過程中自動執(zhí)行常見任務柒桑。Gulp.js 是基于 Node.js 進行構(gòu)建的摩疑。
*?全局安裝?(全局安裝?是因為要使用?Gulp?命令,局部安裝是因為要?壓縮項目)
npm?install -g? gulp?
*?本地安裝
npm?install?gulp--save-dev
*?初始化項目
?npm?init -y
*?編寫?gulpfile.js?文件 (在項目文件中創(chuàng)建gulpfile.js)
? ? ? 創(chuàng)建具體的任務 (引入各種包)
*?安裝相應gulp任務插件
npm install gulp-file-include gulp-less less gulp-autoprefixer gulp-cssmin gulp-uglify gulp-babel babel-core babel-preset-env gulp-htmlmin browser-sync --save-dev
?******? ? gulpfile?文件:
const path = require('path'); //路徑
const gulp = require('gulp'); // gulp本地包匕累，用來提供api
?const less = require('gulp-less');? // 處理less
const autoprefixer = require('gulp-autoprefixer');? ?// 自動添加兼容前綴
const cssmin = require('gulp-cssmin');? ?? // 壓縮css
const uglify = require('gulp-uglify');? ?? // 壓縮js
const babel = require('gulp-babel');?? // ES6語法轉(zhuǎn)化
const htmlmin = require('gulp-htmlmin');? // 壓縮HTML
const browserSync = require('browser-sync').create();const reload = browserSync.reload; // 調(diào)試
// 處理css
gulp.task('css',function(){
?gulp.src(path.join(__dirname,'src','css/*'))
.pipe(less()).pipe(autoprefixer()).pipe(cssmin())
.pipe(gulp.dest(path.join(__dirname,'dist','css')));})
// 處理js
gulp.task('js',function(){
gulp.src(path.join(__dirname,'src','js/**/*.js'))
.pipe(babel({presets: ['env']}))
.pipe(uglify()).pipe(gulp.dest(path.join(__dirname,'dist','js')))})
// 處理html
gulp.task('html',function(){
gulp.src(path.join(__dirname, 'src/view/*.html'))
.pipe(htmlmin({? ? ? ? ? ? ? ? ? ? ? ?// 把html交給htmlmin插件處理? ? ?
collapseWhitespace:true,? ? ? ? // 設(shè)置參數(shù)去除空白? ?
? minifyJS:true,? ? ? ? ? ? ? ? ? ? ?// 壓縮html中的js? ?
? minifyCSS:true,? ? ? ? ? ? ? ? ?// 壓縮html中的css? ? ?
removeComments:true? ? ? // 去除html注釋? ?
})).pipe(gulp.dest(path.join('dist')));})
gulp.task('build',['css','js','html']);
// 調(diào)試
gulp.task('dev',['build'],function(){
browserSync.init({
server: {baseDir:"./dist"? ? ? ? ?// 監(jiān)控目錄的基準路徑? ?
},? ?
port:8888,? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 配置服務端口? ?
notify:false? ? ? ? ? ? ? ? ? ? ? ? ? // 設(shè)置頁面是否有提示信息?
});?
// 具體監(jiān)聽什么?
gulp.watch(path.join(__dirname,'src',"view/**/*"), ['html']).on('change', reload);?
gulp.watch(path.join(__dirname,'src',"css/**/*"), ['css']).on('change', reload);?
gulp.watch(path.join(__dirname,'src',"js/**/*"), ['js']).on('change', reload);});
// 默認任務配置
gulp.task('default',['dev'])
