这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战
更多文章 前文更新推荐参考: 【Node.js 实战-搭建自动化开发环境】- 基本介绍、
搭建前端工程化环境-五
10. 使用工具处理模块
我们在 js 开发中使用了 commonJS 模块化规范，不需要合并 js 文件了，
是利用模块化将 js 功能模块组合在一起，但是我们需要使用工具来对其进行处
理（要将模块化开发的 src 里面的 js，打包后放入到 dist 中）
在这里我们使用 gulp-webpack 工具来处理，注意，这个工具现在已经改名为
webpack-stream,
前面说过，流行的自动化工具有 gulp/webpack 等等，其实这个 `webpack-
stream就是一个小型的，专门在gulp` 里面使用
- 并且使用
babel工具对js代码进行编译, 需要下载 `babel-
loader/babel-core/babel-preset-es2015`,
babel-loader需要下载v7.0.0版本(npm i babel-loader@7.0.0 -D)
gulp.task('handle:js', function () {
// return gulp.src('src/entry.js')//这里瞎写一个就行
// //真正的处理都是在这里的
// .pipe(webpack({
// mode: 'production', // 设置打包模式： none development
production(会压缩代码)
// //单入口 单出口
// // entry: './src/views/index/javascripts/index.js',// 入口
// // output: {
// // filename: 'index.js'
// // }
// //多入口 单出口 数组中，谁在前面，打包的时候也在前面
// // entry: ['./src/views/index/javascripts/index.js','./src/views/index/javascripts/vendor.js'], // 入口
// // output: {
// // filename: 'index.js'
// // }
// // 多入口 多出口
// entry: {
// index: './src/views/index/javascripts/index.js',
// vendor: './src/views/index/javascripts/vendor.js'
// }, // 入口
// output: {
// filename: '[name].min.js' // [name]代表在entry中键名是什么，打包出来的就是什么
// }
// }))
// .pipe(gulp.dest('./dist/index/js'))
let streams = []
for (const page in config.jsoptions) {
//判断如果入口是数组或者是字符串的话就是单出口，否则是多出口
let entry = config.jsoptions[page]
let filename = Array.isArray(entry) || typeof entry === 'string' ? page : '[name]'
let stream = gulp
.src('src/entry.js')
.pipe(
webpack({
mode: 'production',
entry: entry,
output: { filename: filename + '.min.js' },
module: {
rules: [
//webpack中在这里使用各种loader对代码进行各种编译
{
test: /\.js$/, // 对js文件进行处理
loader: 'babel-loader', // 使用babel-loader对其进行处理
query: {
presets: ['es2015'], // 将es6编译一下
},
},
],
},
})
)
.pipe(gulp.dest('./dist/' + page + '/js'))
streams.push(stream)
}
return merge(...streams)
})
11. 利用 gulp-inject 工具自动的在 html 页面中注入 css/js 依赖
// 在页面中写入如下的代码
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- inject:css -->
<!-- endinject -->
</head>
<body>
<h1>Hello Index !!!!@</h1>
<!-- inject:js -->
<!-- endinject -->
</body>
</html>
// gulpfile:
// 专门给各个页面的 html 文件添加对应的依赖
gulp.task('inject', function () {
setTimeout(() => {
config.pages.forEach((page) => {
var target = gulp.src('./dist/' + page + '/' + page + '.html')
// It's not necessary to read the files (will speed up things),
we're only after their paths:
var sources = gulp.src(['./dist/' + page + '/js/*.js', './dist/' +
page + '/css/*.css'], {
read: false,
})
target.pipe(inject(sources, { ignorePath: '/dist' })).pipe
(gulp.dest('./dist/' + page + ''))
})
}, 1000)
})
12. 使用 sass 代替 css
在项目中准备使用 sass 来代替 css， 所以需要使用 gulp-sass 来对
sass 进行编译
- 需要下载 node-sass/gulp-sass
// 处理 css， 合并 css， 压缩 css， 前缀，输出
- 希望可以合并成多个
css，更灵活 - 多页面灵活处理
gulp.task('handle:css', function () {
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(sass({ outputStyle: 'compressed' })) // 把scss编译成css
.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 }
下文更新预告, 跟上节奏
接下来会继续学习 node.js 搭建我们的自动化开发环境,
节省时间成本 提高开发效率, 为我们的开发提效赋能!
跟上前进的步伐, 向前加油
加油!! go~
