在React和Vue推进下,现在很多人都在使用webpack作为自动化构建工具,但其实在很多时候我们并不是一定需要用到它,gulp这样的轻量级构建工具就足够了。
最近一段时间不是太忙,所以就写了三份配置,用在不同的情况下。
这篇文章介绍第一份配置,也是最简单的一份。
这份配置我把它称作demo测试配置,因为在我工作的时候,经常需要快速出效果或者实现某些功能,你没有时间去自己实现,那么就需要找一些现有的例子或者插件。
不过这些demo或者插件很多时候需要在移动端查看或者启动一个服务器,所以这份配置的任务主要就是启动一个本地服务器,可以在移动端和PC端都同时查看,另外在修改代码的时候还能自动刷新,不用每次都切换应用刷新,特别是移动端,可以省去很多麻烦。
详细代码如下:
gulpfile.js:
var gulp = require('gulp'),browserSync = require('browser-sync').create();// 启动 browserSync 服务,自己启动server,并且为浏览器实时刷新提供服务
gulp.task('browserSync', function() {browserSync.init({server: {baseDir: './'},files: './demo/**/*',browser: ["chrome"]})
})// 默认任务,在命令行输入`gulp`来启动任务
gulp.task('default', gulp.parallel('browserSync'))
package.json:
{"name": "gulp-demo","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC","devDependencies": {"browser-sync": "^2.18.12","gulp": "gulpjs/gulp#4.0"}
}
文件夹结构:
XX—
|— demo
|— gulpfile.js
|— package.json
这份配置里只用到了一个插件 browserSync ,这个插件会启动一个localhost服务器,可以自动刷新,并且移动端和PC端同步。
browserSync是一个很强大的插件,这里有一份关于它的中文文档,简单易懂,需要的可以自己查看。
另外这里有一个小技巧就是,我们可以直接通过该插件的配置选项去监听文件修改,而不需要使用gulp的watch功能,更加简单。
下一篇会写一个相对详细的gulpfile文件,包括开发和生产两个阶段,用来满足大部分对模块化和资源管理需求特别强的项目。