①html任務：
1.html文件中代碼的壓縮操作? ?gulp-htmlmin
2.抽取html文件中的公共代碼? gulp-file-include
開始：
命令行工具：gulp-demo>? ?npm install gulp-htmlmin? ? ? // 下載插件gulp-htmlmin
const?gulp?=?require('gulp');
const?htmlmin?=?require('gulp-htmlmin');
gulp.task('htmlmin',()=>{
? ? ? ?gulp.src('./src/*.html')????????//?獲取文件路徑
? ? ? ? ? ?.pipe(htmlmin({collapseWhitespace:true}))???//調(diào)用htmlminc插件
? ? ? ? ? ?.pipe(gulp.dest('dist'))????????//?輸出
});
命令行工具 ：gulp-demo>gulp htmlmin
ps:這樣就壓縮好了html文件狐史，在dist目錄下
命令行工具：gulp-demo>? ?npm install gulp-file-include? ? ? // 下載插件gulp-file-include?
const?gulp?=?require('gulp');
const?htmlmin?=?require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');
gulp.task('htmlmin',()=>{
? ? ? ? ? ? gulp.src('./src/*.html')????????//?獲取文件路徑
? ? ? ? ? ? ? ? .pipe(fileinclude ())
? ? ? ? ? ? ? ? .pipe(htmlmin({collapseWhitespace:true}))???//調(diào)用htmlminc插件
? ? ? ? ? ? ? ?.pipe(gulp.dest('dist'))????????//?輸出
});?
抽取html中公共代碼：在src目錄中妻熊，新建文件夾common（存放公共代碼片段）
找html公共代碼：頭部您旁，尾部
在common文件夾下新建一個目錄header.html;將頭部公共代碼粘貼至header.html中，
將所有包含公共頭部代碼的HTML文件去除，并在去除位置引入以下代碼：@@include('./common/header.html')
命令行工具 ：gulp-demo>gulp htmlmin
②css任務
1.less代碼轉(zhuǎn)為CSS代碼
2.css代碼壓縮
開始：
命令行工具：gulp-demo>? ?npm install gulp-less? ? ?// 下載插件gulp-less?
? ? ? ? ? ? ? ? ? ? ?gulp-demo>? ?npm install gulp-csso? ? // 下載插件gulp-csso? (--save-dev)
const?gulp?=?require('gulp');?
const less = require('gulp-less');
const csso = require('gulp-csso');
gulp.task('cssmin',()=>{
? //? gulp.src('./src/css/*.less')
? ? ? gulp.src(['./src/css/*.less','./src/css/*.css'])? ? ?// 選擇css目錄下的所有l(wèi)ess文件以及css文件
? ? ? ? ? ? ? ?.pipe(less())
? ? ? ? ? ? ? ?.pipe(csso())
? ? ? ? ? ? ? ?.pipe(gulp.dest('dist/css'))? ? ? ? ? ? ??//?輸出?
});
命令行工具 ：gulp-demo>gulp cssmin
③JS任務
1.實現(xiàn)es6代碼轉(zhuǎn)換
2.實現(xiàn)代碼的壓縮
開始：
命令行工具：gulp-demo>? ?npm install (--save-dev) gulp-babel @babel/core @babel/preset-env? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?// 下載插件?gulp-babel
? ? ? ? ? ? ? ? ? ? ?gulp-demo>? ?npm install??(--save-dev)?gulp-uglify? ? ? ? ? ? // 下載插件gulp-uglify
const?gulp?=?require('gulp');?
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
gulp.task('jsmin',()=>{
? ? ? gulp.src('./src/js/*.js')
? ? ? ? ? .pipe(babel({
? ? ? ? ? ? ? ? ? presets:['@babel/env']? ? // 判斷當前代碼運行環(huán)境儿普，將代碼轉(zhuǎn)換為當前代碼壞境所支持的代碼
? ? ? ? ? ?}))
? ? ? ? ? ?.pipe(uglify())
? ? ? ? ? ?.pipe(gulp.dest('dist/js'))
});
命令行工具 ：gulp-demo>gulp jsmin
④復制文件夾圖片...
gulp.task('copy',()=>{
? ? ?gulp.src('./src/images/*')
? ? ? ? ? ? ?.pipe(gulp.dest('dist/images'));
? ? ?gulp.src('./src/lib/*')
? ? ? ? ? ? ?.pipe(gulp.dest('dist/lib'))
});
命令行工具 ：gulp-demo>gulp copy
⑤構(gòu)建任務
gulp.task('default',['htmlmin','cssmin','jsmin','copy']);
命令行工具 ：gulp-demo>gulp default? ? 或者? ?gulp-demo>gulp
