gulp实用配置(1)——demo,gulp实用配置demo

在React和Vue推进下,现在很多人都在使用webpack作为自动化构建工具,但其实在很多时候我们并不是一定需要用到它,gulp这样的轻量级构建工具就足够了。

最近一段时间不是太忙,所以就写了三份配置,用在不同的情况下。

这篇文章介绍第一份配置,也是最简单的一份。

这份配置我把它称作demo测试配置,因为在我工作的时候,经常需要快速出效果或者实现某些功能,你没有时间去自己实现,那么就需要找一些现有的例子或者插件。

不过这些demo或者插件很多时候需要在移动端查看或者启动一个服务器,所以这份配置的任务主要就是启动一个本地服务器,可以在移动端和PC端都同时查看,另外在修改代码的时候还能自动刷新,不用每次都切换应用刷新,特别是移动端,可以省去很多麻烦。

详细代码如下:

在React和Vue推进下,现在很多人都在使用webpack作为自动化构建工具,但其实在很多时候我们并不是一定需要用到它,gulp这样的轻量级构建工具就足够了。

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文件,包括开发和生产两个阶段,用来满足大部分对模块化和资源管理需求特别强的项目。

 

http://www.bkjia.com/Javascript/1217838.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/1217838.htmlTechArticlegulp实用配置(1)——demo,gulp实用配置demo
在React和Vue推进下,现在很多人都在使用webpack作为自动化构建工具,但其实在很多时候我们并不…

这份配置我把它称作demo测试配置,因为在我工作的时候,经常需要快速出效果或者实现某些功能,你没有时间去自己实现,那么就需要找一些现有的例子或者插件。

不过这些demo或者插件很多时候需要在移动端查看或者启动一个服务器,所以这份配置的任务主要就是启动一个本地服务器,可以在移动端和PC端都同时查看,另外在修改代码的时候还能自动刷新,不用每次都切换应用刷新,特别是移动端,可以省去很多麻烦。