gulp搭建自动化步骤
程序员文章站
2024-02-25 14:47:27
...
gulp搭建自动化步骤
gulp步骤如下
1、初始化项目： npm install -y或者 npm i -y
2、安装gulp-cli ： npm i gulp-cli -g
3、安装 gulp： npm i gulp --save-dev
4、在项目目录第一层建立文件 ： gulpfile.js
5、创建src文件夹
6、在src中创建 html、scss、javascripts文件夹
7、在html中创建index.html和template模板文件 _header.html、在scss中创建index.scss、在javascripts中创建libs文件夹 放库 比如jQuery 等 ，然后在javascripts第一层新建 index.js（注意：写内容）
8、开始编写gulpfile.js文件内容（包括：html、javascript、scss 基础部分）
9、下载html压缩包 — gulp-htmlmin： npm i gulp-htmlmin --save-dev
10、下载 javascript ES6 转为 ES5 —gulp-babelnpm i gulp-babel @babel/core @babel/preset-env --save-dev
11、下载 javascript 压缩 ——gulp-uglify ： npm i gulp-uglify --save-dev
12、下载 sass ： npm i sass --save-dev
13、下载 sass 编译为css ——gulp-sass-china： npm i gulp-sass-china --save-dev
14、下载 css 压缩 ——gulp-clean-css ：npm i gulp-clean-css --save-dev
gulp代码如下
// 1. 文件转存 : html , scss , js
// html : 1. 转存 2. 压缩;
// scss : 1. 编译成 css 2. 压缩 3. 转存;
// js : 1. (ES6) 编译成 ES5 : babel 2. 压缩 3. 转存;
const gulp = require("gulp")
// html压缩
const htmlmin = require("gulp-htmlmin")
// javascript es6 编译为 es5
const babel = require("gulp-babel")
// javascript压缩
const uglify = require("gulp-uglify")
// sass 编译为 css
const sass = require("gulp-sass-china")
// 下载sass 并解析工具
sass.compiler = require("sass")
// css 压缩
const cleanCSS = require("gulp-clean-css")
// html操作 执行
gulp.task("html", async () => {
gulp.src(["./src/html**/*.html"])
//html压缩
.pipe(htmlmin({
collapseWhitespace: true
}))
.pipe(gulp.dest("./dist/"))
})
// javascript操作执行
gulp.task("javascript", async () => {
gulp.src(["./src/javascripts/**/*.js", "!./src/javascripts/libs/**/*.js"])
// es6 转为 es5
.pipe(babel({
presets: ['@babel/env']
}))
// javascript 压缩
.pipe(uglify())
.pipe(gulp.dest("./dist/javascripts"))
})
// 大文件进行一次转存
gulp.task("libs", async () => {
gulp.src(["./src/javascripts/libs/**/*.js"])
.pipe(gulp.dest("./dist/javascripts/libs"))
})
// scss 操作执行
gulp.task("scss", async () => {
gulp.src(["./src/scss/**/*.scss"])
.pipe(sass().on("error", sass.logError))
// css 压缩
.pipe(cleanCSS({
compatibility: 'ie8'
}))
.pipe(gulp.dest("./dist/css"))
})
// 1、测试指令是否可以用 然后继续下面的整合操作
// 监听 watch
gulp.task("watch", () => {
gulp.watch(["./src/html/**/*.html"], gulp.parallel("html"))
gulp.watch(["./src/javascripts/**/*.html"], gulp.parallel("javascript"))
gulp.watch(["./src/html/**/*.html"], gulp.parallel("html"))
})
// 2、测试watch指令
// 默认指令
gulp.task("default",gulp.parallel("watch","libs"))
// 插件使用：
// 1、下载
// 2、引入
// 3、使用
// 4、测试
gulp服务器工具使用
1、下载服务器工具 gulp-connect ：npm i gulp-connect --save-dev
2、下载服务器代理工具：npm i http-proxy-middleware --save-dev
全部代码如下 文件名 gulpfile.js
// 1. 文件转存 : html , scss , js
// html : 1. 转存 2. 压缩;
// scss : 1. 编译成 css 2. 压缩 3. 转存;
// js : 1. (ES6) 编译成 ES5 : babel 2. 压缩 3. 转存;
const gulp = require("gulp")
// html压缩
const htmlmin = require("gulp-htmlmin")
// javascript es6 编译为 es5
const babel = require("gulp-babel")
// javascript压缩
const uglify = require("gulp-uglify")
// sass 编译为 css
const sass = require("gulp-sass-china")
// 下载sass 并解析工具
sass.compiler = require("sass")
// css 压缩
const cleanCSS = require("gulp-clean-css")
// html 拼接工具
const fileinclude = require("gulp-file-include")
// 服务器工具
const connect = require("gulp-connect")
// 服务器代理工具
let proxy = require("http-proxy-middleware").createProxyMiddleware;
// html操作 执行
gulp.task("html", async () => {
gulp.src(["./src/html**/*.html","!./src/html/template/**/*.html"])
// html 拼接工具
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
//html压缩
.pipe(htmlmin({
collapseWhitespace: true
}))
.pipe(gulp.dest("./dist/"))
// 自动刷新
.pipe(connect.reload())
})
// javascript操作执行
gulp.task("javascript", async () => {
gulp.src(["./src/javascripts/**/*.js", "!./src/javascripts/libs/**/*.js"])
// es6 转为 es5
.pipe(babel({
presets: ['@babel/env']
}))
// javascript 压缩
.pipe(uglify())
.pipe(gulp.dest("./dist/javascripts"))
// 自动刷新
.pipe(connect.reload())
})
// 大文件进行一次转存
gulp.task("libs", async () => {
gulp.src(["./src/javascripts/libs/**/*.js"])
.pipe(gulp.dest("./dist/javascripts/libs"))
})
// scss 操作执行
gulp.task("scss", async () => {
gulp.src(["./src/scss/**/*.scss"])
.pipe(sass().on("error", sass.logError))
// css 压缩
.pipe(cleanCSS({
compatibility: 'ie8'
}))
.pipe(gulp.dest("./dist/css"))
// 自动刷新
.pipe(connect.reload())
})
// 1、测试指令是否可以用 然后继续下面的整合操作
// 监听 watch
gulp.task("watch", async () => {
gulp.watch(["./src/html/**/*.html"], gulp.parallel("html"))
gulp.watch(["./src/javascripts/**/*.js"], gulp.parallel("javascript"))
gulp.watch(["./src/scss/**/*.scss"], gulp.parallel("scss"))
})
// 2、测试watch指令
// 默认指令
// gulp.task("default", gulp.parallel("watch", "libs"))
// 插件使用：
// 1、下载
// 2、引入
// 3、使用
// 4、测试
// gulp 服务器 :
// 1. 测试服务器; => 主动刷新功能; 文件更改，浏览器自动刷新;
// 2. 代理功能; 代理可以不使用 nginx 使用nodejs
// 服务器指令
// 我们在nodejs服务器之中不能执行php!;
// 所有后缀为.php 的文件在这个服务器下无法执行; http://localhost:3000
gulp.task("connect", async () => {
connect.server({
root: "./dist",
port: 3000,
// 开启自动刷新功能
livereload: true,
middleware: function () {
return [
// pxx 不能和路径里面的任意数据重合
// proxy (代理的路径 , 配置的参数)
proxy("/pxx", {
// 代理目标;
target: "https://apiv2.pinduoduo.com/api/gindex/subject/limited/goods",
// 必须切换源内容;
changeOrigin: true,
// 重写源上的部分内容;
pathRewrite: {
"/pxx": ""
}
}),
proxy("/dt", {
target: "https://www.duitang.com/napi/blog/list/by_filter_id/",
changeOrigin: true,
pathRewrite: {
"/dt": ""
}
}),
]
}
});
});
gulp.task("dev", gulp.series("libs", "html", "javascript", "scss", gulp.parallel("watch", "connect")));
但是为了区分环境 把整个gulpfile.js文件内容分开写
// 区分环境
// gulp dev 或者 gulp build
// npm run dev 或者 npm run build
// dev 开发环境 => 写代码看效果;
// 写代码保存频率非常高, 工程化环境应当尽量精简, 展示速度应该相对较快;
// build 生产环境 => 代码质量要求最高;
// 该压缩的，该转义的，该去掉空格的...
1、gulpfile.dev.js
// 1. 文件转存 : html , scss , js
// html : 1. 转存 2. 压缩;
// scss : 1. 编译成 css 2. 压缩 3. 转存;
// js : 1. (ES6) 编译成 ES5 : babel 2. 压缩 3. 转存;
const gulp = require("gulp")
// sass 编译为 css
const sass = require("gulp-sass-china")
// 下载sass 并解析工具
sass.compiler = require("sass")
// html 拼接工具
const fileinclude = require("gulp-file-include")
// 服务器工具
const connect = require("gulp-connect")
// 服务器代理工具
let proxy = require("http-proxy-middleware").createProxyMiddleware;
// html操作 执行
gulp.task("html", async () => {
gulp.src(["./src/html**/*.html","!./src/html/template/**/*.html"])
// html 拼接工具
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest("./dist/"))
// 自动刷新
.pipe(connect.reload())
})
// javascript操作执行
gulp.task("javascript", async () => {
gulp.src(["./src/javascripts/**/*.js", "!./src/javascripts/libs/**/*.js"])
.pipe(gulp.dest("./dist/javascripts"))
// 自动刷新
.pipe(connect.reload())
})
// 大文件进行一次转存
gulp.task("libs", async () => {
gulp.src(["./src/javascripts/libs/**/*.js"])
.pipe(gulp.dest("./dist/javascripts/libs"))
})
// scss 操作执行
gulp.task("scss", async () => {
gulp.src(["./src/scss/**/*.scss"])
.pipe(sass().on("error", sass.logError))
.pipe(gulp.dest("./dist/css"))
// 自动刷新
.pipe(connect.reload())
})
// 1、测试指令是否可以用 然后继续下面的整合操作
// 监听 watch
gulp.task("watch", async () => {
gulp.watch(["./src/html/**/*.html"], gulp.parallel("html"))
gulp.watch(["./src/javascripts/**/*.js"], gulp.parallel("javascript"))
gulp.watch(["./src/scss/**/*.scss"], gulp.parallel("scss"))
})
// 2、测试watch指令
// 默认指令
// gulp.task("default", gulp.parallel("watch", "libs"))
// 插件使用：
// 1、下载
// 2、引入
// 3、使用
// 4、测试
// gulp 服务器 :
// 1. 测试服务器; => 主动刷新功能; 文件更改，浏览器自动刷新;
// 2. 代理功能; 代理可以不使用 nginx 使用nodejs
// 服务器指令
// 我们在nodejs服务器之中不能执行php!;
// 所有后缀为.php 的文件在这个服务器下无法执行; http://localhost:3000
gulp.task("connect", async () => {
connect.server({
root: "./dist",
port: 3000,
// 开启自动刷新功能
livereload: true,
middleware: function () {
return [
// pxx 不能和路径里面的任意数据重合
// proxy (代理的路径 , 配置的参数)
proxy("/pxx", {
// 代理目标;
target: "https://apiv2.pinduoduo.com/api/gindex/subject/limited/goods",
// 必须切换源内容;
changeOrigin: true,
// 重写源上的部分内容;
pathRewrite: {
"/pxx": ""
}
}),
proxy("/dt", {
target: "https://www.duitang.com/napi/blog/list/by_filter_id/",
changeOrigin: true,
pathRewrite: {
"/dt": ""
}
}),
]
}
});
});
gulp.task("dev", gulp.series("libs", "html", "javascript", "scss", gulp.parallel("watch", "connect")));
// dev 开发环境 => 写代码看效果;
// 写代码保存频率非常高, 工程化环境应当尽量精简, 展示速度应该相对较快;
2、gulpfile.build.js
// 1. 文件转存 : html , scss , js
// html : 1. 转存 2. 压缩;
// scss : 1. 编译成 css 2. 压缩 3. 转存;
// js : 1. (ES6) 编译成 ES5 : babel 2. 压缩 3. 转存;
const gulp = require("gulp")
// html压缩
const htmlmin = require("gulp-htmlmin")
// javascript es6 编译为 es5
const babel = require("gulp-babel")
// javascript压缩
const uglify = require("gulp-uglify")
// sass 编译为 css
const sass = require("gulp-sass-china")
// 下载sass 并解析工具
sass.compiler = require("sass")
// css 压缩
const cleanCSS = require("gulp-clean-css")
// html 拼接工具
const fileinclude = require("gulp-file-include")
// html操作 执行
gulp.task("html", async () => {
gulp.src(["./src/html**/*.html"])
// html 拼接工具
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
//html压缩
.pipe(htmlmin({
collapseWhitespace: true
}))
.pipe(gulp.dest("./dist/"))
})
// javascript操作执行
gulp.task("javascript", async () => {
gulp.src(["./src/javascripts/**/*.js", "!./src/javascripts/libs/**/*.js"])
// es6 转为 es5
.pipe(babel({
presets: ['@babel/env']
}))
// javascript 压缩
.pipe(uglify())
.pipe(gulp.dest("./dist/javascripts"))
})
// 大文件进行一次转存
gulp.task("libs", async () => {
gulp.src(["./src/javascripts/libs/**/*.js"])
.pipe(gulp.dest("./dist/javascripts/libs"))
})
// scss 操作执行
gulp.task("scss", async () => {
gulp.src(["./src/scss/**/*.scss"])
.pipe(sass().on("error", sass.logError))
// css 压缩
.pipe(cleanCSS({
compatibility: 'ie8'
}))
.pipe(gulp.dest("./dist/css"))
})
// 1、测试指令是否可以用 然后继续下面的整合操作
// 监听 watch
gulp.task("watch", async () => {
gulp.watch(["./src/html/**/*.html"], gulp.parallel("html"))
gulp.watch(["./src/javascripts/**/*.js"], gulp.parallel("javascript"))
gulp.watch(["./src/scss/**/*.scss"], gulp.parallel("scss"))
})
// 2、测试watch指令
// 默认指令
// gulp.task("default", gulp.parallel("watch", "libs"))
// 插件使用：
// 1、下载
// 2、引入
// 3、使用
// 4、测试
// gulp 服务器 :
// 1. 测试服务器; => 主动刷新功能; 文件更改，浏览器自动刷新;
// 2. 代理功能; 代理可以不使用 nginx 使用nodejs
// 服务器指令
// 我们在nodejs服务器之中不能执行php!;
// 所有后缀为.php 的文件在这个服务器下无法执行; http://localhost:3000
gulp.task("build", gulp.series("libs", "html", "javascript", "scss"));
// build 生产环境 => 代码质量要求最高;
// 该压缩的，该转义的，该去掉空格的...
3、gulpfile.js
// 区分环境
// gulp dev 或者 gulp build
// npm run dev 或者 npm run build
// dev 开发环境 => 写代码看效果;
// 写代码保存频率非常高, 工程化环境应当尽量精简, 展示速度应该相对较快;
// build 生产环境 => 代码质量要求最高;
// 该压缩的，该转义的，该去掉空格的...
let mod = process.argv[2];
console.log(mod)
switch (mod) {
case "build":
require("./gulpfile.build");
break;
case "dev":
require("./gulpfile.dev");
break;
}
4、改动package.json文件指令
{
"name": "gulp_project",
"version": "1.0.0",
"description": "> 建立一个package.json",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "./node_modules/.bin/gulp dev",
"build": "./node_modules/.bin/gulp build"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.10.5",
"@babel/preset-env": "^7.10.4",
"gulp": "^4.0.2",
"gulp-babel": "^8.0.0",
"gulp-clean-css": "^4.3.0",
"gulp-connect": "^5.7.0",
"gulp-file-include": "^2.2.2",
"gulp-htmlmin": "^5.0.1",
"gulp-sass-china": "^3.1.0",
"gulp-uglify": "^3.0.2",
"http-proxy-middleware": "^1.0.5",
"sass": "^1.26.10"
},
"dependencies": {}
}
5、目录名如下
上一篇： 集群搭建--修改克隆后的虚拟机IP地址
下一篇： webstrom下运行gulp初试