这是我参与8月更文挑战的第5天，活动详情查看：8月更文挑战
更多文章推荐参考: 【Node.js 实战-搭建自动化开发环境】- 基本介绍、
搭建前端工程化环境
使用 gulp-htmlmin 工具
输出 src 中的 html 文件，并进行压缩，我们使用 gulp-htmlmin 工具
- 压缩 html
const htmlmin = require('gulp-htmlmin')
// 处理html，将src中的html文件输出到dist中去
gulp.task('handle:html', function () {
return gulp.src('./src/views/*/*.html')
.pipe(htmlmin(...))
.pipe(gulp.dest('./dist'))
})
为了方便维护配置，所以我们新建了 config/index.js，我们在这个文件中定义了 config 对象，在其中准备存放全局的一些配置
- 全局的配置
const config = {
htmloptions: {
// html压缩的配置
removeComments: true, // 清除HTML注释
collapseWhitespace: true, // 压缩HTML
collapseBooleanAttributes: true, // 省略布尔属性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: true, // 删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true, // 删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true, // 删除<style>和<link>的type="text/css"
minifyJS: true, // 压缩页面JS
minifyCSS: true, // 压缩页面CSS
},
}
为了在 gulp file.js 能够引入并且访问到这个 config 对象，我们需要将这个对象暴露出去
// 把config暴露出去，是为了在其他地方用，只能暴露一次
module.exports = config
这样就可以在 gulp file.js 中引入这个配置对象了
// 全局配置 因为是模块了。所以不用写.js了
// const config = require('./config/index')
const config = require('./config') // 在这里因为取的是index，所以可以省略index
// ....
gulp.task('handle:html', function () {
return gulp
.src('./src/views/*/*.html')
.pipe(htmlmin(config.htmloptions))
.pipe(gulp.dest('./dist'))
})
并且做出了文件监听，保证在我们更改 html 文件后也能执行这个任务
// 监听函数
gulp.task('watch', function () {
gulp.watch('./src/views/*/*.html', ['handle:html'])
})
// 默认任务
gulp.task('default', ['handle:html', 'watch'])
这样我们执行 gulp 命令的化，环境就 run 起来了
1. 更改 npm start 启动模式
大部分的环境都是通过 npm start 来运行的，package.json 中有一个 scripts 配置项，在这里可以配置一些快捷操作，例如：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"htmlmin": "gulp htmlmin",
"watch": "gulp watch",
"dev": "gulp",
"start": "npm run dev"
},
这样的话，就可以利用 npm run htmlmin 和 npm run watch 等操作来执行对应的命令了,因为 start 比较特殊，所以可以直接 npm start 来运行
搭建一个热更新服务器，利用 gulp-connect
- 01. 创建热更新服务器
gulp.task('server', function () {
connect.server(config.serveroptions)
})
- 02. server 配置
serveroptions: {// 热更新服务
root: './dist',
port: 8000,
livereload: true
}
因为当文件更新后，是需要重新刷新页面的，所以需要配置 reload 任务并且在文件更改后执行
- 让服务器刷新的任务
gulp.task('reload', function () {
return gulp
.src('./dist/**/*.html') // 让所有的html文件都重新加载一下
.pipe(connect.reload())
})
gulp.task('watch', function () {
gulp.watch('./src/views/*/*.html', ['handle:html', 'reload'])
})
- 3. 处理了 css，达到合并，压缩的效果
首先现在全局配置文件中做好 css 的配置
cssoptions: {// css配置
'index': { // index页面的css
'common': [ // index页面处理之后的common.min.css需要合并的文件
'./src/stylesheets/reset.css',
'./src/views/index/stylesheets/common/*.css'
],
// index页面处理之后的index.min.css需要合并的文件
'index': './src/views/index/stylesheets/index/*.css'
},
'list': {
'list': [
'./src/stylesheets/reset.css',
'./src/views/list/*/*.css'
]
}
}
上面的配置需要根据 css 文件的增加适当的更改，gulp 中的配置如下:
// 使用merge-stream 合并流 const merge = require('merge-stream')
// 处理css， 合并css， 压缩css， 前缀，输出
gulp.task('handle:css', function () {
// 1. 希望可以合并成多个css，更灵活 2. 多页面灵活处理
let streams = [] // 存放下面多个文件流的数组
for (const page in config.cssoptions) {
// 遍历多个页面
for (const file in config.cssoptions[page]) {
// 遍历各个页面中的多个打包css文件配置
let stream = gulp
.src(config.cssoptions[page][file])
.pipe(
autoprefixer({
// 自动加前缀
browsers: [
'last 2 versions',
'Safari >0',
'Explorer >0',
'Edge >0',
'Opera >0',
'Firefox >=20',
], // last 2 versions- 主流浏览器的最新两个版本
cascade: false, // 是否美化属性值 默认：true 像这样：
// -webkit-transform: rotate(45deg);
// transform: rotate(45deg);
remove: true, // 是否去掉不必要的前缀 默认：true
})
)
.pipe(concat(file + '.css')) // 合并文件
.pipe(minifycss()) // 压缩文件
.pipe(rename({ suffix: '.min' })) // 重命名
.pipe(gulp.dest('./dist/' + page + '/css')) // 输出到对应的目录中
streams.push(stream) // 把当前的文件流存储到数组中
}
}
return merge(...streams) // 合并多个文件流
// ... 是es6 中的展开运算符 var a = [1,2,3,4] var b = [ ...a, 5,6,7] // b: [1,2,3,4,5,6,7]
// var a = { x: 1, y: 2 } var b = { z: 3, ...a } // b: { x: 1, y: 2, z: 3 }
})
- 监听 css
gulp.task('watch', function () {
gulp.watch('./src/views/*/*.html', ['handle:html', 'reload'])
gulp.watch('./src/**/*.css', ['handle:css', 'reload'])
})
下文更新预告, 跟上节奏加油
接下来会继续学习 node.js 完成搭建我们的自动化开发环境,
提高开发效率, 为我们的开发提效赋能!
跟上前进的步伐, 向前加油
加油!! go~
