起因
最近想写一个在线聊天的webApp,前台界面最初并不打算使用框架,使用纯html+css+js,为了更高效地开发,js最好使用es6新语法,css最好使用sass,那么问题来了,如何实现编译自动化,以及文件自动打包压缩,那当然是使用gulp+webpack啦!
需求与解决方案
html
- 对代码进行压缩
- 使用gulp插件
gulp-htmlmin
css
- 对sass进行编译与压缩
- 使用gulp插件
gulp-sass
js
- 对es6语法转换为es5,并打包到一个文件中并压缩
- 使用
webpack
,利用babel
进行语法转换,并打包成一个文件,使用gulp插件gulp-webpack
来引入webpack配置文件
优化
- 使用gulp插件
gulp-plumber
,防止gulp因为编译错误而结束进程
- 使用gulp插件
依赖安装
npm install --save-dev babel-core babel-loader babel-preset-es2015 gulp gulp-sass gulp-plumber gulp-webpack gulp-htmlmin webpack
目录结构
public 文件夹
- 用于存储处理完的文件,也就是发送到浏览器端的
src 文件夹
- 用于存储待编译的文件,也是编写代码的地方
gulpfile.js
- gulp的配置文件
server.js
- express配置文件,用于响应浏览器请求,发送public文件夹中的文件,这里不再列出
webpack.config.js
- webpack配置文件
配置文件
// gulpfile.js
const gulp = require('gulp'),
sass = require('gulp-sass'),
plumber = require('gulp-plumber'),
webpack = require('gulp-webpack'),
htmlmin = require('gulp-htmlmin');
// 用于压缩html文件,具体使用方法见 gulp-htmlmin 官方文档
gulp.task('html', () => {
return gulp.src('./src/*.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest('./public/'))
});
// 用于编译压缩scss文件
gulp.task('scss', () => {
return gulp.src('./src/sass/**/*.scss')
// 防止因为编译失败而退出
.pipe(plumber())
// 压缩scss文件
.pipe(sass({
outputStyle: 'compressed'
}))
.pipe(gulp.dest('./public/stylesheet/'))
});
// es6文件转换并压缩
gulp.task('es6', () => {
return gulp.src('./src/js/**/*.js')
// 使用webpack配置文件,详细见下
.pipe(webpack(require('./webpack.config')))
.pipe(gulp.dest('./public/js'));
});
// 实时监控文件是否发生变化,若发生变化,立刻选择使用上述三个任务
gulp.task('watch', () => {
gulp.watch('./src/sass/**/*.scss', ['scss']);
gulp.watch('./src/js/**/*.js', ['es6']);
gulp.watch('./src/*.html', ['html'])
});
// 在终端中输入 gulp 就开始gulp进程
gulp.task('default', ['scss', 'es6', 'html', 'watch']);
// webpack.config.js
const webpack = require('webpack');
module.exports = {
// 为了方便查看错误,总共有四种
devtool: 'source-map',
// 入口文件
entry: __dirname + '/src/js/test.js',
// 输出的路径
output: {
path: __dirname + '/public/js',
filename: 'bundle.js'
},
module: {
loaders: [
{
// 使用babel进行转换
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
]
},
plugins: [
// 对bundle.js 进行压缩
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
};
结语
配置结束,后面开始项目开发,当然,还有文件打md5码什么的,也可以使用gulp来完成,我的第二个gulp学习笔记中有
感觉 gulp+webpack 的使用有一种 图形界面+终端 使用的感觉,各有所长嘛