插件下载：
npm install 插件名 --save-dev
gulp-concat : 合并文件(js/css)
gulp-uglify : 压缩js文件
gulp-rename : 文件重命名
gulp-less : 编译less
gulp-sass：编译sass
gulp-clean-css : 压缩css
gulp-htmlmin：压缩html文件
-
gulp-connect：热加载，配置一个服务器
-
每个任务都要添加即时更新
.pipe(connect.reload())
-
gulp-load-plugins：打包插件（里面包含了其他所有插件） - 代替的插件必须是下载好的
-
gulp-autoprefixer：给css加前缀，将一些不兼容的css属性添加前缀让各个浏览器兼容
-
需要配置的兼容哪些浏览器
{ browsers:["last 5 version","iOS > 3","Firefox > 2"] }会出现一个提示，希望将这个配置写在package.json中：
"browsersList":[ "last 2 version", "iOS > 7", "Fixefox > 20" ]
-
-
es6转es5
babel-core
-
babel-preset-es2015
导入的时候只要导入一个gulp-babel即可，需要配置的选项：
{ presets: ['es2015'] // 必须要有这个参数，否则会报错 }
gulp-clean：清空目标文件夹
open：自动打开浏览器
压缩图片
压缩图片很多电脑不能用,我尝试了很久(别白嫖,点关注),装镜像是最有可能成功的
命令语句:
初始化:npm init -y
装gulp库:npm i gulp
装插件:npm i gulp-imagemin
卸载插件:npm uninstall gulp-imagemin
清缓存:npm cache clean -f
查看镜像文件: nrm ls
安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org
镜像安装插件: cnpm install gulp-imagemin --save-dev
运行gulpfile.js文件: gulp
gulpfile.js
const { src, dest } = require('gulp')
const imagemin = require('gulp-imagemin');
function img(cb){
src('./img/*.jpg')
.pipe(imagemin())
.pipe(dest('./imgmin'))
cb();
}
exports.default = img
直接用gulp
文件结构
命令窗口
文件初始化: npm init -y
安装包: npm i gulp gulp-sass gulp-rename gulp-load-plugins gulp-clean-css gulp-htmlmin gulp-uglify gulp-concat gulp-connect gulp-clean open
gulpfile.js
const { src, dest, watch, series, parallel } = require('gulp')
const open = require('open')
const $ = require('gulp-load-plugins')()
// 清空目标文件夹
function cleanDir(cb){
src('./dist')
.pipe($.clean())
cb()
}
/****************** 处理css **********************/
// 编译sass
function handleSass(cb){
src('./src/sass/*.scss')
.pipe($.sass())
.pipe(dest("./src/css"))
.pipe($.connect.reload())
cb()
}
// 自动加前缀
function autoprefix(cb){
src('./src/css/*.css')
.pipe($.autoprefixer())
.pipe($.rename({
prefix:"prefix-"
}))
.pipe(dest('./src/css'))
.pipe($.connect.reload())
cb()
}
// 压缩css
function handleCss(cb){
src('./src/css/prefix-*.css')
.pipe($.cleanCss())
.pipe($.rename({
suffix:".min"
}))
.pipe(dest("./dist/css"))
.pipe($.connect.reload())
cb()
}
/***************************** 处理js ****************************/
// 注意：
// 1.uglify压缩js的时候只能压缩es5的语法
// 2.babel只能转es6，不能转es7的语法
// es6~es5
function Es6ToEs5(cb){
src('./src/js/*.js')
.pipe($.babel({
presets: ["es2015"]
}))
.pipe($.rename({
prefix: 'es5-'
}))
.pipe(dest('./src/js'))
.pipe($.connect.reload())
cb()
}
// 压缩js
function handleJs(cb){
src('./src/js/es5-*.js')
.pipe($.uglify())
.pipe($.rename({
suffix:".min"
}))
.pipe(dest('./dist/js'))
.pipe($.connect.reload())
cb()
}
/****************** 处理html *********************/
// 压缩html
function handleHtml(cb){
src('./src/pages/*.html')
.pipe($.htmlmin({
collapseWhitespace: true
}))
.pipe(dest('./dist/pages'))
.pipe($.connect.reload())
cb()
}
/**************** 服务器 *********************/
function createServer(cb){
$.connect.server({
port:9527,
root:'./dist/pages',
livereload: true
})
// 打开浏览器
open('http://localhost:9527')
// 监视任务
watch('./src/sass/*.scss',handlerSass)
watch('./src/css/*.css',autoprefix)
watch('./src/css/prefix-*.css',handleCss)
watch('./src/js/*.js',Es6ToEs5)
watch('./src/js/es5-*.js',handleJs)
watch('./src/pages/*.html',handleHtml)
cb()
}
// 合并文件视情况而定
/*
function concatFile(cb){
src('./src/') // 需要合并的文件路径
.pipe($.concat())
.pipe(dest("./")) // 需要保存的文件夹的路径
cb()
}
*/
/******************************* 导出任务 ****************************/
exports.default = series(cleanDir, parallel(series(handleSass, autoprefix, handleCss), series(Es6ToEs5, handleJs), handleHtml), createServer)
exports.cleanDir = cleanDir
exports.handleSass = handleSass
exports.autoprefix = autoprefix
exports.handleCss = handleCss
exports.Es6ToEs5 = Es6ToEs5
exports.handleJs = handleJs
exports.handleHtml = handleHtml
exports.createServer = createServer
packaje.json
{
"name": "project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.26.3",
"babel-preset-es2015": "^6.24.1",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^7.0.1",
"gulp-babel": "^7.0.1",
"gulp-clean": "^0.4.0",
"gulp-clean-css": "^4.3.0",
"gulp-concat": "^2.6.1",
"gulp-connect": "^5.7.0",
"gulp-htmlmin": "^5.0.1",
"gulp-load-plugins": "^2.0.5",
"gulp-rename": "^2.0.0",
"gulp-sass": "^4.1.0",
"gulp-uglify": "^3.0.2",
"open": "^7.3.0"
},
"browserslist": [
"last 5 version",
"iOS > 3",
"Firefox > 2",
"Chrome > 3"
]
}