全局安裝gulp
cpnm install gulp -g
然后本地在安裝一個gulp添加到配置文件
cnpm install gulp --save
然后就是配置一些gulp的插件
const connect = require('gulp-connect');
const htmlmin = require('gulp-htmlmin');
const uglify = require('gulp-uglify');
const sass = require('gulp-sass');
const babel = require('gulp-babel');
const imagemin = require('gulp-imagemin');
const pngquant = require('imagemin-pngquant');
const cache = require('gulp-cache');
const rename = require('gulp-rename');
const runSequence = require('gulp-sequence');
const del = require('del');
新增然后配置gulpfile.js
//path
let path = {
//其他資源 path
staticPath: ['src/build/css/*.*'],
//html patn
htmlPath: ['src/**/*.html'],
//sass path
sassPath: ['src/build/sass/*.scss'],
//js path
jsPath: ['src/build/js/*.js'],
//images path
imagesPath: ['src/build/img/*.{png,jpg,gif,ico}'],
// clear path
clean: ['./dist/**/*.*']
}
// default 默認(rèn)執(zhí)行任務(wù)
gulp.task('default',cb => {
runSequence(
'clean', // 第一步：清理目標(biāo)目錄
'dest', // 第二步：打包
'watch', // 第三步：監(jiān)控
cb
);
});
//Clean target
gulp.task('clean', function(){
del(path.clean).then(function(){
console.log('Deleted files and folders:\n' + JSON.stringify(path));
});
});
//拷貝靜態(tài)資源文件
gulp.task('file',() => {
//獲取文件
gulp.src(path.staticPath)
//讓文件流走向下個環(huán)節(jié)
.pipe(gulp.dest('dist/build'))
})
//當(dāng)文件修改時自動同步
gulp.task('watchFile',() => {gulp.watch(path.staticPath,['file']);})
//壓縮同步html
gulp.task('html',() => {
gulp.src(path.htmlPath)
//html壓縮
.pipe(htmlmin({
removeComments: true,//清除HTML注釋
collapseWhitespace: true,//壓縮HTML
removeEmptyAttributes: true,//刪除所有空格作屬性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true,//刪除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,//刪除<style>和<link>的type="text/css"
minifyJS: true,//壓縮頁面JS
minifyCSS: true//壓縮頁面CSS
}))
.pipe(gulp.dest('dist/'));
});
//當(dāng)html修改時自動同步
gulp.task('watchHtml',() => {gulp.watch(path.htmlPath,['html']);});
//讓sass轉(zhuǎn)換為css
gulp.task('sass',() => {
gulp.src(path.sassPath)
//scss轉(zhuǎn)換成css租悄，并設(shè)置css轉(zhuǎn)換格式
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest('src/build/css'));
});
//當(dāng)scss文件修改時自動轉(zhuǎn)譯同步
gulp.task('watchSass',() => {gulp.watch(path.sassPath,['sass']);});
//轉(zhuǎn)譯壓縮js
gulp.task('babel',() => {
gulp.src(path.jsPath)
//jsEs5轉(zhuǎn)譯
.pipe(babel({
presets: ['env']
}))
//js壓縮
.pipe(uglify())
.pipe(rename({ extname: '.min.js' }))
.pipe(gulp.dest('dist/build/js'));
});
//當(dāng)js文件被修改的時候自動轉(zhuǎn)譯同步
gulp.task('watchBabel',() => {gulp.watch(path.jsPath,['babel']);});
//圖片壓縮
gulp.task('imagemin', function () {
gulp.src(path.imagesPath)
.pipe(cache(imagemin({
interlaced: true,
progressive: true, //類型：Boolean 默認(rèn)：false 無損壓縮jpg圖片
svgoPlugins: [{removeViewBox: false}], //不要移除svg的viewbox屬性
use: [pngquant({optimizationLevel: 4})] //使用pngquant深度壓縮png圖片的imagemin插件
})))
.pipe(gulp.dest('dist/build/img'));
});
//當(dāng)圖片修改的時候自動壓縮同步
gulp.task('watchImagemin',() => {gulp.watch(path.imagesPath,['imagemin']);});
// 打包構(gòu)建所有的文件
gulp.task('dest',cb => {runSequence(['file','html','sass','babel','imagemin'],cb)});
// 自動轉(zhuǎn)譯同步所有的文件
gulp.task('watch',cb => {runSequence(['watchFile','watchHtml','watchSass','watchBabel','watchImagemin'],'connect','watchRehtml',cb)});
//設(shè)置本地服務(wù)
gulp.task('connect',() => {
connect.server({
root: 'src',
host: '192.168.2.15',
livereload: true,
port: 8888
});
});
//跟新本地文件同步到瀏覽器
gulp.task('rehtml',() => {
gulp.src('src/**/*.*')
.pipe(connect.reload());
});
//本地跟新文件自動同步到瀏覽器
gulp.task('watchRehtml',() => {gulp.watch(['src/**/*.*'], ['rehtml']);});
babel需要添加個.babelrc
{
"presets": ["env"]
}
然后就可以使用gulp + 任務(wù)名執(zhí)行任務(wù)了
