嘉兴网站建设费用,房地产平面设计网站,wordpress整合discu,wordpress 网址 建站在React和Vue推进下#xff0c;现在很多人都在使用webpack作为自动化构建工具#xff0c;但其实在很多时候我们并不是一定需要用到它#xff0c;gulp这样的轻量级构建工具就足够了。
最近一段时间不是太忙#xff0c;所以就写了三份配置#xff0c;用在不同的情况下。
这…在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文件包括开发和生产两个阶段用来满足大部分对模块化和资源管理需求特别强的项目。
