gulp
const { src, task, watch, dest, lastRun, series } = require('gulp');
const $ = require('gulp-load-plugins')();
const moment = require('moment');
const bs = require('browser-sync').create();
const del = require('del');
// 使用gulp-minify-css壓縮css檔案
/**
* gulp-minify-css 最終是呼叫clean-css
*/
// task('css', async function() {
// await src("./src/**/*.css")
// .pipe($.sourcemaps.init())
// .pipe($.minifyCss({
// format: 'keep-breaks'
// }))
// .pipe($.rename({ //檔案重新命名
// //'dirname': './', //stream位元組流方向檔案
// //'basename': "main", //stream位元組流生成的檔名
// //'prefix': 're_', //向stream位元組流中加入檔案字首"re_"
// 'suffix': '_min', //向stream位元組流中加入檔案字尾"_min"
// 'extname': ".css" //向stream位元組流中加入副檔名".css"
// }))
// .pipe($.sourcemaps.write())
// .pipe(dest("./dist/css/"))
// })
//使用clean-css壓縮css檔案
// task('css', async function() {
// await src("./src/**/*.css")
// .pipe($.sourcemaps.init())
// .pipe($.cleanCss({
// format: 'keep-breaks'
// }))
// .pipe($.rename({ //檔案重新命名
// //'dirname': './', //stream位元組流方向檔案
// //'basename': "main", //stream位元組流生成的檔名
// //'prefix': 're_', //向stream位元組流中加入檔案字首"re_"
// 'suffix': '_min', //向stream位元組流中加入檔案字尾"_min"
// 'extname': ".css" //向stream位元組流中加入副檔名".css"
// }))
// .pipe($.sourcemaps.write())
// .pipe(dest("./dist/css/"))
// })
//使用cssnano壓縮css檔案
async function listenCss() {
await src('./src/**/*.css', { since: lastRun(listenCss) })
.pipe($.rev())
.pipe($.filter(['**', '!old/old_*.css']))
.pipe($.autoprefixer({ //css|js1自動注入
cascade: true,
add: true,
remove: true,
flexbox: true
}))
.pipe($.plumber({
errorHandler: function(error) { //報錯不暫停
this.emit('end');
}
}))
.pipe($.sourcemaps.init())
.pipe($.cssnano({
'zindex': false
}))
.pipe($.rename({
suffix: "_min",
extname: '.css'
}))
.pipe($.sourcemaps.write())
.pipe(dest('./dist/'))
.pipe($.rev.manifest())
.pipe(dest('./dist/css/'))
.pipe(bs.stream());
};
// task('css', async function() {
// await src('./src/**/*.css') //搜尋src資料夾下的所有以".css"結尾的檔案css檔案源
// //.pipe(concat("main.css"))
// .pipe($.sourcemaps.init()) //map初始化
// .pipe($.cssnano({ //壓縮css檔案
// zindex: false //防止cssnano自動計算壓縮css檔案中的z-index值
// }))
// .pipe($.rename({ //檔案重新命名
// //'dirname': './', //stream位元組流方向檔案
// //'basename': "main", //stream位元組流生成的檔名
// 'prefix': 're_', //向stream位元組流中加入檔案字首"re_"
// 'suffix': '_min', //向stream位元組流中加入檔案字尾"_min"
// 'extname': ".css" //向stream位元組流中加入副檔名".css"
// }))
// .pipe($.sourcemaps.write('.'))
// .pipe(dest('./dist/css/')); //輸出css檔案流
// });
//將less檔案轉化為css檔案並壓縮
async function listnLess() {
await src('./src/**/*.less', { since: lastRun(listenCss) })
.pipe($.rev()) //檔名後加md5字尾 清理web載入快取
.pipe($.filter(['**', '!old/old_*.less']))
.pipe($.plumber({
errorHandler: function(error) { //報錯不暫停
this.emit('end');
}
}))
.pipe($.sourcemaps.init())
.pipe($.less())
.pipe($.autoprefixer({
cascade: true,
add: true,
remove: true,
flexbox: true
}))
.pipe($.cssnano({ //壓縮css檔案
zindex: false //防止cssnano自動計算壓縮css檔案中的z-index值
}))
.pipe($.rename({ //檔案重新命名
'suffix': '_min', //向stream位元組流中加入檔案字尾"_min"
'extname': ".css" //向stream位元組流中加入副檔名".css"
}))
.pipe($.sourcemaps.write('.'))
.pipe(dest('./dist/'))
.pipe($.rev.manifest()) //生成一個rev_mainfest.json檔案
.pipe(dest('./dist/css/')) //輸出css檔案流
.pipe(bs.stream());
};
// task('less', async function() {
// await src('./src/**/*.less')
// //.pipe($.concat("main.less"))
// .pipe($.sourcemaps.init())
// .pipe($.less())
// .pipe($.cssnano({ //壓縮css檔案
// zindex: false //防止cssnano自動計算壓縮css檔案中的z-index值
// }))
// .pipe($.rename({ //檔案重新命名
// //'dirname': './', //stream位元組流方向檔案
// //'basename': "main", //stream位元組流生成的檔名
// 'prefix': 're_', //向stream位元組流中加入檔案字首"re_"
// 'suffix': '_min', //向stream位元組流中加入檔案字尾"_min"
// 'extname': ".css" //向stream位元組流中加入副檔名".css"
// }))
// .pipe($.sourcemaps.write('.'))
// .pipe(dest('./dist/css/')); //輸出css檔案流
// });
//將Sass檔案轉化為css檔案並壓縮
async function listenSass() {
await src('./src/**/*.scss', { since: lastRun(listenCss) })
.pipe($.rev()) //檔名後加md5字尾 清理web載入快取
.pipe($.filter(['**', '!old/old_*.scss']))
.pipe($.plumber({
errorHandler: function(error) { //報錯不暫停
this.emit('end');
}
}))
.pipe($.sourcemaps.init())
.pipe($.sass())
.pipe($.autoprefixer({
cascade: true,
add: true,
remove: true,
flexbox: true
}))
.pipe($.cssnano({ //壓縮css檔案
zindex: false //防止cssnano自動計算壓縮css檔案中的z-index值
}))
.pipe($.rename({ //檔案重新命名
'suffix': '_min', //向stream位元組流中加入檔案字尾"_min"
'extname': ".css" //向stream位元組流中加入副檔名".css"
}))
.pipe($.sourcemaps.write('.'))
.pipe(dest('./dist/'))
.pipe($.rev.manifest())
.pipe(dest('./dist/css/')) //輸出css檔案流
.pipe(bs.stream());
};
// task('sass', async function() {
// await src('./src/**/*.scss')
// //.pipe($.concat("main.less"))
// .pipe($.sourcemaps.init())
// .pipe($.sass().on('error', sass.logError))
// .pipe($.cssnano({ //壓縮css檔案
// zindex: false //防止cssnano自動計算壓縮css檔案中的z-index值
// }))
// .pipe($.rename({ //檔案重新命名
// //'dirname': './', //stream位元組流方向檔案
// //'basename': "main", //stream位元組流生成的檔名
// 'prefix': 're_', //向stream位元組流中加入檔案字首"re_"
// 'suffix': '_min', //向stream位元組流中加入檔案字尾"_min"
// 'extname': ".css" //向stream位元組流中加入副檔名".css"
// }))
// .pipe($.sourcemaps.write('.'))
// .pipe(dest('./dist/css/')); //輸出css檔案流
// });
//使用htmlmin處理html檔案
async function listenHtml() {
await src('./src/**/*.html', { since: lastRun(listenCss) })
.pipe($.rev()) //檔名後加md5字尾 清理web載入快取
.pipe($.filter(['**', '!old/old_*.html']))
.pipe($.plumber({
errorHandler: function(error) { //報錯不暫停
this.emit('end');
}
}))
.pipe($.useref()) //解析構建在HTML檔案中的未經優化的指令碼和樣式表
.pipe($.sourcemaps.init())
.pipe($.htmlmin({
collapseWhitespace: true,
caseSensitive: false,
removeTagWhitespace: false,
}))
.pipe($.rename({
suffix: '.min'
}))
.pipe($.sourcemaps.write())
.pipe(dest('./dist/'))
.pipe($.rev.manifest())
.pipe(dest('./dist/'))
.pipe(bs.stream());
};
// task("html", async function html() {
// await src('./src/**/*.html')
// .pipe($.sourcemaps.init())
// .pipe($.htmlmin({
// collapseWhitespace: true,
// caseSensitive: false,
// removeTagWhitespace: false,
// }))
// .pipe($.rename({
// suffix: '.min'
// }))
// .pipe($.sourcemaps.write())
// .pipe(dest('./dist/'))
// })
//處理js檔案
async function listenJs() {
await src('./src/js/*.js', { since: lastRun(listenCss) })
.pipe($.hint()) //js格式驗證
.pipe($.reporter('default')) //錯誤顯示風格
// .pipe($.reporter('fail'))// 出現錯誤是終止
.pipe($.rev()) //檔名後加md5字尾 清理web載入快取
.pipe($.filter(['*.*', '!*/old_*.js']))
.pipe($.autoprefixer({
browsers: ['last 2 versions'],
cascade: true,
add: true,
remove: true,
flexbox: true
}))
.pipe($.plumber({
errorHandler: function(error) {
this.emit('end');
}
}))
.pipe($.sourcemaps.init())
.pipe($.babel({
presets: ['@babel/env'] //使用babel外掛將es6轉為es5
}))
.pipe($.uglify({
parse: {
html5_comments: true
},
compress: {
drop_console: false,
},
toplevel: false,
}))
.pipe($.rename({
suffix: '.min',
}))
.pipe($.sourcemaps.write('.'))
.pipe(dest('./dist/'))
.pipe($.rev.manifest())
.pipe(dest('./dist/js/'))
.pipe(bs.stream());
};
// async function js() {
// await src('./src/js/*.js')
// .pipe($.sourcemaps.init())
// .pipe($.concat('all.js'))
// .pipe($.uglify({
// parse: {
// html5_comments: true //支援再JS檔案中存在html5的註釋形式
// },
// compress: {
// assignments: true, //對賦值表示式應用優化,只出現一次var定義
// drop_console: false, //壓縮後刪除console物件,預設為false
// booleans: true, //布林上下文運算的優化
// // !!a?1:0 ===> a?1:0
// directives: true, //刪除程式碼冗餘或非標準程式碼
// join_vars: true, //壓縮後連線定義的語句僅用一個var
// loops: true, //靜態情況下對確定迴圈次數的迴圈進行優化
// },
// mangle: {
// properties: {
// reserved: [] //不要損壞保留陣列中列出的屬性名
// }
// },
// output: {
// ascii_only: false, //在字串和regexp中轉義Unicode字元（影響非ascii字元無效的指令
// beautify: true, //美化輸出
// },
// sourceMap: {
// content: "content from compiled.js.map",
// filename: 'out.js',
// url: 'out.js.map'
// },
// nameCache: null,
// toplevel: false, //忽略定義，直接將資料代替變數
// ie8: false, //false表示不支援ie8
// warnings: false, //通過true返回壓縮後的警告結果
// }))
// .pipe($.rename({
// suffix: '.min',
// }))
// .pipe($.sourcemaps.write('.'))
// .pipe(dest('./dist/js/'))
// }
//刪除old資料夾中的所有檔案
async function listenDel() {
del.sync(['./old/**/*.*'])
};
//壓縮Zip檔案的任務
async function listenZip() {
var timestamp = moment().format("YYY-MM-DD_");
await src('./src/**/*.zip', { since: lastRun(listenCss) })
.pipe($.plumber({
errorHandler: function(error) { //報錯不暫停
this.emit('end');
}
}))
.pipe($.sourcemaps.init())
.pipe($.zip(timestamp + ".zip"))
.pipe($.rename({
'suffix': '.min'
}))
.pipe($.sourcemaps.write())
.pipe(dest('./dist/'))
.pipe(bs.stream());
};
//壓縮圖片檔案的任務
async function listenImage() {
await src('./src/**/*.{jpg,png,svg,gif}', { since: lastRun(listenCss) })
.pipe($.plumber({
errorHandler: function(error) {
this.emit('end');
}
})).pipe($.sourcemaps.init())
.pipe($.cache($.imagemin([
$.imagemin.gifsicle({
interlaced: true,
optimizationLevel: 1,
}),
$.imagemin.mozjpeg({
quality: 75,
progressive: true,
}),
$.imagemin.optipng({
optimizationLevel: 5,
interlaced: false,
errorRecovery: true,
}),
$.imagemin.svgo({
plugins: [
{ removeViewBox: false },
{ cleanupIDs: false }
]
})
])))
.pipe($.rename({
'suffix': '.min'
}))
.pipe($.sourcemaps.write())
.pipe(dest('./dist/'))
.pipe(bs.stream());
};
//初始化伺服器
async function bsInit() {
await bs.init({
'server': {
baseDir: './'
}
});
};
//監聽任務
function watchTaks() {
watch('./src/css/*.css', series(listenCss));
watch('./src/css/*.less', series(listnLess));
watch('./src/css/*.scss', series(listenSass));
watch('./src/js/*.js', series(listenJs));
watch('./src/html/*.html', series(listenHtml));
watch('./src/image/*.{jpg,png,svg,gif}', series(listenImage));
};
exports.default = function() {
bsInit();
watchTaks();
};
相關文章
- gulp核心方法 - gulp篇
- gulp與iframe
- gulp入門
- 詳解 Gulp4 和 Gulp3 的區別
- gulp使用gulp-file-include將header/footer引入頁面Header
- gulp使用指南
- gulp入門文件
- gulp 使用指南
- 【轉載】gulp minimist
- gulp技巧總結
- 前端工程化篇之 gulp 一文讓您輕鬆掌握gulp 【全套gulp原始碼註釋解析】前端原始碼
- 使用gulp搭建專案
- gulp完全安裝教程
- gulp壓縮檔案
- gulp個人總結
- gulp 生成 css-spriterCSS
- Gulp的安裝及用法
- gulp4增量編譯編譯
- gulp與webpack的區別Web
- 前端工程構建之談：gulp3要不要升級到Gulp4前端
- Gulp的代理轉發外掛
- semantic-ui@2.4.2 install: `gulp install`UI
- 20分鐘gulp快速入門
- Gulp壓縮報錯處理
- Gulp.task() 原始碼簡析原始碼
- vscode中執行gulp的taskVSCode
- 快速搭建gulp專案實戰
- Gulp4.0入門和實戰
- Webpack + gulp + babel-loader 配置踩坑WebBabel
- 使用gulp實現前端自動化前端
- 如何gulp壓縮,醜化程式碼
- 【總結】gulp，本地web伺服器Web伺服器
- gulp構建es6專案
- gulp-imagemin版本9圖片壓縮
- 淺談自動化構建之gulp
- 基於gulp的前端自動化方案前端
- 安裝gulp步驟和使用方法
- 前端開發中提到的“腳手架”到底指什麼，CLI？gulp 和 gulp-cli有什麼區別前端