gulp的使用和常规代码的打包
常用的工具
grunt 比较古老,功能少,更新少,插件少,现在用的很少
gulp pc端 jquery的项目打包更多使用gulp
webpack 最主流的打包工具,vue、react都是用的webpack
gulp的介绍
用自动化构建工具增强你的工作流程!
gulp 将开发流程中让人痛苦或耗时的任务自动化,从而减少你所浪费的时间、创造更大价值。
简单:代码优于配置、node 最佳实践、精简的 API 集,gulp 让工作前所未有的简单。
高效:基于 node 强大的流(stream)能力,gulp 在构建过程中并不把文件立即写入磁盘,从而提高了构建速度。
生态:遵循严格的准则,确保我们的插件结构简单、运行结果可控。
gulp使用
一、准备工作
安装node环境:https://nodejs.org,下载LTS版本的即可
在任意位置打开命令行工具,使用npm全局安装gulp命令行工具 npm i gulp-cli -g,安装完成以后执行gulp -v 只要看到版本号就说明安装成功
创建项目目录,一般由小写字母加数字构成
进入目录,执行npm init -y 初始化项目,会创建一个package.json文件,这个文件里就是当前项目的一些说明信息,也可以手动修改
规划目录结构,比如:src放源代码,dist就是根据src源代码使用gulp打包之后可以用来上线的代码,dist是不用动的,我们写代码在src里面写,但是最后运行的是dist目录
在当前项目局部安装gulp, npm i gulp -D,高版本npm会自动帮我们 –save 保存在package.json文件的依赖里,但是现在新版本的npm不需要加这个参数了,会默认保存;-D的意思是安装成开发依赖,也就是说这个包只有开发环境需要,线上产品环境不需要。这样的话即使删除node_modules也可以直接运行 npm i 或者yarn就可以根据package.json里面的所有依赖包信息把这些依赖包全局安装进来
创建一个gulpfile.js文件,注意:文件名一定要叫gulpfile!!!然后在这个文件里制定各种任务。
管理路径,把所有的路径集中用paths对象来管理,包括源文件路径和目标路径
首先是path
const path = {
html: {
src: 'src/**/*.html', // src下面的所有文件夹下的所有html文件,下面的js,css以此类推
dest: 'dist' // 处理的结果放到dist目录
},
css: {
src: 'src/css/**/*.css', // src下面css目录里的所有文件夹下的所有css文件
dest: 'dist/css' // 处理的结果放到dist下的css目录里
},
js: {
src: 'src/js/**/*.js',
dest: 'dist/js'
},
img: {
src: 'src/images/**/*',
dest: 'dist/images'
},
libs: {
src: 'src/libs/**/*',
dest: 'dist/libs'
}
}
二、html任务
执行npm i gulp-htmlmin -D安装压缩html的插件,然后制定压缩任务,再通过module.exports 把这个任务暴露出去,就可以执行gulp html 来运行这个任务了
const gulp = require('gulp')
const htmlmin = require('gulp-htmlmin')
const html = () => {
// 需要把任务代码return
return gulp.src(path.html.src)
.pipe(htmlmin({
removeComments: true,//清除HTML注释
collapseWhitespace: true,//压缩HTML
collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input checked />
removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
minifyJS: true,//压缩页面JS
minifyCSS: true//压缩页面CSS
}))
.pipe(gulp.dest(path.html.dest))
}
module.exports = {
html
}
三、js任务
先ES6转ES5,然后再压缩,最后在导出那里加上js任务
安装压缩js的包npm i gulp-uglify -D
安装ES6转ES5的包npm i gulp-babel @babel/core @babel/preset-env -D
const uglify = require('gulp-uglify')
const babel = require('gulp-babel')
const js = () => {
return gulp.src(path.js.src)
.pipe(babel({
presets: ['@babel/env']
}))
.pipe(uglify())
.pipe(gulp.dest(path.js.dest))
.pipe(connect.reload())
}
module.exports = {
html,
js
}
四、css任务
压缩css:npm i gulp-clean-css -D
const cleanCss = require('gulp-clean-css')
const css = () => {
return gulp.src(path.css.src)
.pipe(cleanCss())
.pipe(gulp.dest(path.css.dest))
}
module.exports = {
html,
js,
css
}
五、css前缀
给需要兼容的css样式自动加上兼容性前缀:npm i gulp-autoprefixer -D
const cleanCss = require('gulp-clean-css')
const autoPrefixer = require('gulp-autoprefixer')
const css = () => {
return gulp.src(path.js.src)
.pipe(autoprefixer({
cascade: false
}))
.pipe(cleanCss())
.pipe(gulp.dest(path.css.dest))
}
module.exports = {
html,
js,
css
}
六、使用sass
如果用到sass来写样式,那么还要把css任务做进一步修改:
sass编译成成css:npm i node-sass gulp-sass -D
首先,path对象里css的src属性路径要把后缀名css改成scss,再修改css任务
const cleanCss = require('gulp-clean-css')
const autoPrefixer = require('gulp-autoprefixer')
const sass = require('gulp-sass')
const css = () => {
return gulp.src(path.js.src)
.pipe(sass())
.pipe(autoprefixer({
presets: ['@babel/env']
}))
.pipe(cleanCss())
.pipe(gulp.dest(path.css.dest))
}
七、开启服务器
npm i gulp-connect -D项目根目录是dist,所以项目中的一切路径都写成/开头的绝对路径,/指的就是dist,避免模块化之后相对位置发生变变化导致路径错误
const connect = require('gulp-connect')
const server = () => {
connect.server({
root: 'dist', // 项目根路径是dist
livereload: true, // 服务器支持热更新
port: 2333 // 配置端口号2333
})
}
八、删除dist
由于dist目录是每次执行任务时自动生成的,所以为了避免上一次旧的代码对新的代码造成影响,我们一般会在开启任务之前先把dist目录删掉: npm i del -D
const del = require('del')
const clean = () => del('dist')
九、文件移动
还有一些图片或者引入的第三方的文件需要做一个移动处理
// img任务:复制到dist里
const img = () => gulp.src(path.img.src).pipe(gulp.dest(path.img.dest))
// libs任务:文件的复制
const libs = () => gulp.src(path.libs.src).pipe(gulp.dest(path.libs.dest))
十、监听
监听html、js和css文件的变化,重启对应任务,在被监听的任务后面都要重启服务器
// watch任务:监听一些文件的修改,一旦被修改了就自动重启对应的任务
const watch = () => {
gulp.watch(path.html.src, html)
gulp.watch(path.css.src, css)
gulp.watch(path.js.src, js)
}
// 再在html、css和js任务后面都加上一句.pipe(connect.reload()),比如css任务改成这样:
const css = () => {
return gulp.src(path.css.src)
.pipe(sass())
.pipe(cleanCss())
.pipe(gulp.dest(path.css.dest))
.pipe(connect.reload())
}
十一、默认任务
任务导出做一下修改,单个导出只能单个执行,所以我们可以把所有要执行的任务放在默认任务里,就只需要在命令行里执行gulp即可执行所有任务:导出默认任务流,先同步执行delDist,再异步执行其他任务
module.exports.default = gulp.series(delDist, gulp.parallel(html, css, js, img, libs, server, watch))
十二、跨域
如果需要跨域访问其他接口,则需要配置跨域,需要依赖另一个插件:npm i http-proxy-middleware -D
const connect = require('gulp-connect')
const { createProxyMiddleware } = require('http-proxy-middleware')
const server = () => {
connect.server({
root: 'dist',
livereload: true,
port: 2333,
// 中间件:函数返回一个数组,数组配置跨域代理
middleware () {
return [
// 将以/api为开头的请求代理到域 http://localhost:80
createProxyMiddleware('/api', {
target: 'http://localhost:80',
changeOrigin: true
})
]
}
})
}
现在,我们只需要在命令行里运行gulp 项目就能启动起来了,然后在浏览器里输入 http://localhost:2333就能访问主页啦。
最后,贴上完整代码如下:
const gulp = require('gulp'),
htmlmin = require('gulp-htmlmin'),
cleanCss = require('gulp-clean-css'),
del = require('del'),
uglify = require('gulp-uglify'),
babel = require('gulp-babel'),
connect = require('gulp-connect'),
sass = require('gulp-sass'),
{ createProxyMiddleware } = require('http-proxy-middleware')
// 在每次开启新任务之前先把dist删掉
const delDist = () => del('dist')
// 先把所有的任务用到的文件源路径和目标路径做一个统一规划
const path = {
html: {
src: 'src/**/*.html',
dest: 'dist'
},
css: {
src: 'src/css/**/*.scss',
dest: 'dist/css'
},
js: {
src: 'src/js/**/*.js',
dest: 'dist/js'
},
img: {
src: 'src/images/**/*',
dest: 'dist/images'
},
libs: {
src: 'src/libs/**/*',
dest: 'dist/libs'
}
}
// 制定html任务:通过函数的方式
const html = () => {
// 需要把任务代码return
return gulp.src(path.html.src)
.pipe(htmlmin({
removeComments: true,//清除HTML注释
collapseWhitespace: true,//压缩HTML
collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input checked />
removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
minifyJS: true,//压缩页面JS
minifyCSS: true//压缩页面CSS
}))
.pipe(gulp.dest(path.html.dest))
.pipe(connect.reload())
}
// css任务:先把scss文件编译成css,再压缩
const css = () => {
return gulp.src(path.css.src)
.pipe(sass())
.pipe(cleanCss())
.pipe(gulp.dest(path.css.dest))
.pipe(connect.reload())
}
// js任务
const js = () => {
return gulp.src(path.js.src)
.pipe(babel({
presets: ['@babel/env']
}))
.pipe(uglify())
.pipe(gulp.dest(path.js.dest))
.pipe(connect.reload())
}
// img任务:复制到dist里
const img = () => gulp.src(path.img.src).pipe(gulp.dest(path.img.dest))
// libs任务
const libs = () => gulp.src(path.libs.src).pipe(gulp.dest(path.libs.dest))
// server任务
const server = () => {
connect.server({
root: 'dist',
livereload: true,
port: 2333,
// 中间件:函数返回一个数组,数组配置跨域代理
middleware () {
return [
// 将以/api为开头的请求代理到域 http://localhost
createProxyMiddleware('/api', {
target: 'http://localhost',
changeOrigin: true
})
]
}
})
}
// watch任务:监听一些文件的修改,一旦被修改了就自动重启对应的任务
const watch = () => {
gulp.watch(path.html.src, html)
gulp.watch(path.css.src, css)
gulp.watch(path.js.src, js)
}
// gulp.series 是同步执行任务,第一个执行完了才能执行第二个
// gulp.parallel 是异步执行任务,多个任务同时运行
module.exports.default = gulp.series(delDist, gulp.parallel(html, css, js, img, libs, server, watch))
package.json
{
"name": "for-my-rose-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "Dary",
"license": "ISC",
"dependencies": {
"gulp": "^4.0.2"
},
"devDependencies": {
"@babel/core": "^7.10.2",
"@babel/preset-env": "^7.10.2",
"del": "^5.1.0",
"gulp-autoprefixer": "^7.0.1",
"gulp-babel": "^8.0.0",
"gulp-clean-css": "^4.3.0",
"gulp-connect": "^5.7.0",
"gulp-htmlmin": "^5.0.1",
"gulp-sass": "^4.1.0",
"gulp-uglify": "^3.0.2",
"http-proxy-middleware": "^1.0.4",
"node-sass": "^4.14.1"
}
}
转载:http://www.xiongdalin.com/2019/12/27/gulp4/