以往用jq写页面，都是在本地直接打开html文件，修改之后在浏览器F5刷新才能看到变化，实在是相当费劲。为了以后节省更多的开发时间，实现能够监听改动，最后自动构建和打包，我特地学习了gulp。
gulp是一款基于stream（流）的自动化构建工具，主要用来设定程序自动处理静态资源的工作。简单的说，gulp就是用来打包项目的。gulp很容易上手，只要掌握几个api即可。
中文官网：https://www.gulpjs.com.cn/docs/
我使用gulp主要是为了想做css、js、image资源的压缩和打包，添加时间戳。这里我引入gulp的几个插件：
images：
gulp-imagemin [ 压缩图片 ]
css：
gulp-sass [ sass编译，我习惯用sass写样式，这里需要这个插件帮助转css ]
gulp-postcss、autoprefixer [ 根据设置浏览器版本自动处理浏览器前缀，使用她我们可以很潇洒地写代码，不必考虑CSS针对浏览器的兼容性问题 ]
postcss-px2rem [ px转rem ]
cssmin [ 压缩css ]
javascript：
gulp-uglify [ 压缩js ]
还有其他几个插件：
gulp-clean [ 删除文件、文件夹 ]
run-sequence [ 按顺序执行task ，这个很重要，因为gulp中task是异步进行的，有时候有些任务需要先完成A才能执行B，不然会报错 ]
gulp-rev [ 添加时间戳 ]
gulp-rev-collector [ 时间戳添加后再在html 里面替换原有的文件 ]
browser-sync [ 让浏览器实时、快速响应文件更改（html、js、css、sass、less等）并自动刷新页面 ]
gulp可以让你根据需要自定义你的工作流。在此附上我的项目结构
项目结构
安装：
首先确认你的环境都准备好了，安装gulp。可参考https://gulpjs.com/docs/en/getting-started/quick-start
最后gulp -v # 测试是否安装成功
在根目录下创建gulpfile.js，这个文件用来配置所有任务。
首先将需要用到的插件下载安装：npm install 插件名 --save-dev。
在gulpfile.js中引用所用到的所有插件，注意：gulp要首先被引用。
然后是创建任务，如果任务较多，可以分小任务创建。
// 压缩css
gulp.task('miniCss', function () {
return gulp.src(['src/resource/css/*.scss'])
.pipe(sass().on('error', function (err) {
console.error('Error', err.message);
}))
.pipe(postcss([px2rem({remUnit: 100}), autoprefixer()]))
// 保留一份原文件
// .pipe(gulp.dest('dist/resource/css'))
.pipe(postcss([ autoprefixer() ]))
.pipe(cssmin())
.pipe(rev()) //css增加md5版本号，6位
.pipe(gulp.dest('dist/resource/css'))
.pipe(rev.manifest())
.pipe(gulp.dest('rev/css'));
});
// 压缩js
gulp.task('miniScripts', function () {
return gulp.src('src/resource/js/*.js')
// .pipe(gulp.dest('dist/resource/js'))
.pipe(uglify())
.pipe(rev()) //css增加md5版本号，6位
.pipe(gulp.dest('dist/resource/js'))
.pipe(rev.manifest())
.pipe(gulp.dest('rev/js'));
});
// 输出i18n
gulp.task('copy', function() {
return gulp.src('src/resource/i18n/**/*.properties')
.pipe(gulp.dest('dist/resource/i18n/'))
});
// 输出字体
gulp.task('font', function () {
return gulp.src('src/resource/fonts/*.{otf,eot,svg,ttf,woff,woff2}')
.pipe(gulp.dest('dist/resource/fonts'))
});
// 输出html
gulp.task('html', function () {
return gulp.src(['src/*.html'])
.pipe(gulp.dest('dist'));
});
// 压缩图片
gulp.task('miniImages', function () {
return gulp.src('src/resource/images/*.{jpg,png,gif,ico}')
.pipe(imagemin())
.pipe(gulp.dest('dist/resource/images'))
});
// 给有引用静态资源的html更改引用的文件名字
gulp.task('rev', function() {
gulp.src(['rev/**/*.json', 'src/*.html'])
.pipe(revCollector())
.pipe(gulp.dest('dist'));
});
// 开启服务，监听代码改动自动刷新页面
gulp.task('browserSyncInit', function () {
browserSync.init({
server: {
baseDir: "./dist",
index: '/index.html',
},
port: 8989
})
});
// 清空dist
gulp.task('clean', function () {
return gulp.src('dist', {read: false})
.pipe(clean());//清除dist目录
});
上面将多个任务分别声明，然后通过组合将上面的任务串起来：
// build组合
gulp.task('build', function(done) {
runSequence(
['font', 'copy', 'miniImages'],
['miniCss'],
['miniScripts'],
['rev'],
['browserSyncInit'],
done);
});
// 打包命令
gulp.task('default', function (done) {
runSequence(
['clean'],
['build'],
done);
});
默认在命令窗口执行gulp，就会执行名为default的task。于是我们命令打包生成了文件夹dist，并且终端开启了一个localhost:8989服务。我们可以借此查看生成的dist文件在服务上能否正常运行。
上面实现了代码的压缩打包，gulp实现监听文件变化其实也是类似，不多说，附上代码：
// 监听任务
// 监听css
gulp.task('listenCss', function () {
return gulp.src(['src/resource/css/*.scss'])
.pipe(sass().on('error', function (err) {
console.error('Error', err.message);
}))
.pipe(postcss([px2rem({remUnit: 100}), autoprefixer()]))
.pipe(postcss([ autoprefixer() ]))
.pipe(gulp.dest('test/resource/css'))
.pipe(browserSync.stream());
})
// 监听js
gulp.task('listenScripts', function() {
return gulp.src(['src/resource/js/*.js'])
.pipe(gulp.dest('test/resource/js'))
.pipe(browserSync.stream());
})
// 输出i18n
gulp.task('listenI18n', function() {
return gulp.src('src/resource/i18n/**/*.properties')
.pipe(gulp.dest('test/resource/i18n/'))
.pipe(browserSync.stream())
});
// 刷新html
gulp.task('htmlReload', function () {
return gulp.src('src/*.html')
.pipe(gulp.dest('test'))
.pipe(browserSync.stream());
});
// 监听图片
gulp.task('listenImages', function () {
return gulp.src('src/resource/images/*.{jpg,png,gif,ico}')
.pipe(gulp.dest('test/resource/images'));
});
// 输出字体
gulp.task('listenFonts', function() {
return gulp.src('src/resource/fonts/*.{otf,eot,svg,ttf,woff,woff2}')
.pipe(gulp.dest('test/resource/fonts'));
});
// 监听
gulp.task('watch', function () {
gulp.watch('src/resource/css/*.scss').on('change', function (file) {
gulp.start('listenCss');
});
gulp.watch('src/resource/js/*.js').on('change', function (file) {
gulp.start('listenScripts');
});
gulp.watch('src/*.html').on('change', function(){
gulp.start('htmlReload');
});
gulp.watch('src/resource/i18n/**/*.properties').on('change', function (file) {
gulp.start('listenI18n');
});
});
// 清空test
gulp.task('cleanTest', function () {
return gulp.src('test', {read: false})
.pipe(clean());//清除test目录
});
gulp.task('browserSyncTestInit', function () {
browserSync.init({
server: {
baseDir: "./test",
index: '/index.html',
},
port: 8989
})
});
// dev组合
gulp.task('develop', function(done){
runSequence(
['listenFonts', 'listenI18n', 'listenImages'],
['listenCss'],
['listenScripts'],
['htmlReload'],
['browserSyncTestInit'],
done);
});
// 本地跑命令
gulp.task('dev', function (done) {
runSequence(
['cleanTest'],
['develop'],
['watch'],
done);
});
在终端输入“gulp dev”即可。
网友评论