Gulp新人指南-2 watch 预处理 scss

补充一下Index.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <h1>测试页面</h1>
    <svg></svg>
</body>
</html>

Globbing in Node/Node通配符

Globs 匹配模式或者文件类型从而添加更多文件到gulp.src,类似正则表达式,但是主要用于文件路径.

当使用通配符,计算机检查

多数Gulp只需要4种不同的通配符:

  1. *.scss:  *匹配当前目录所有类型(当前项目或者目录).
  2. **/*.scss: 这个匹配所有根目录以及子目录的文件.
  3. !not-me.scss:  !符号会排除一个文件,这个例子里not-me.scss会被排除.
  4. *.+(scss|sass):+和()括号会增加匹配类型,使用|分号分开,这个例子会包括.scss和.sass.

现在我们可以用scss/**/*.scss替换app/scss/styles.scss.

这样,在app/scss目录下以及所有子目录的.scss文件都会被编译成css到app/css

gulp.task('sass', function() {
  return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss and children dirs
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
})

比如添加一个print.scss会自动生成一个print.css.

除了手动执行命令,还可以使用自动运行的方法编译sass,每当文件保存的时候。

通过命令”watching”.

监测Sass文件变动

Gulp提供一个watch方法监测文件保存,语法如下:

// Gulp watch syntax
gulp.watch('files-to-watch', ['tasks', 'to', 'run']); 

如果我们想监测所有Sass文件,每当Sass文件保存的时候运行sass任务,我们需要替换files-to watch->app/scss/**/*.scss,和['tasks', 'to', 'run'] -> ['sass']:

// Gulp watch syntax
gulp.watch('app/scss/**/*.scss', ['sass']); 

我们经常要监测超过一种类型,我们可以把许多监视流程组合到一个watch任务:

gulp.task('watch', function(){
  gulp.watch('app/scss/**/*.scss', ['sass']); 
  // Other watchers
})

如果执行gulp watch 命令,会见到gulp立刻启动监测.

而且自动执行sass任务,每当.scss文件被保存.

我们更进一步,通过 Browser Sync 使Gulp重载浏览器,当我们保存.scss文件。

浏览器时事加载同步

浏览器同步使开发者更容易做到热加载,更多的像,多设备同步行为 synchronizing actions across multiple devices.

安装Browser Sync:

$ npm install browser-sync --save-dev

你会发现,这个没有gulp-前缀,因为它不是插件.

require

var browserSync = require('browser-sync').create();

创建一个browserSync任务,确保Gulp会使用Browser Sync去启动一个服务器.

当我们运行服务器的时候,我们需要告诉Browser Sync根目录在什么地方,当然我们的例子里是‘app’文档:

gulp.task('browserSync', function() {
  browserSync.init({
    server: {
      baseDir: 'app'
    },
  })
})

还需要稍微修改sass任务,使Browser Sync可以注入到css样式,也就是更新css.

每当浏览器运行sass任务。

gulp.task('sass', function() {
  return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
    .pipe(browserSync.reload({
      stream: true
    }))
});

现在设置完成,我们要同时运行watch和browserSync任务实现热加载.

执行两次命令行是比较笨的方法。所以来告诉Gulp同时执行他们,告诉watch任务,browserSync必须完成后才可以执行watch.

我们可以添加一个参数告诉watch任务,语法如下:

gulp.task('watch', ['array', 'of', 'tasks', 'to', 'complete','before', 'watch'], function (){
  // ...
})

在我们例子里,修改如下.

gulp.task('watch', ['browserSync'], function (){
  gulp.watch('app/scss/**/*.scss', ['sass']); 
  // Other watchers
})

我们还想确保sass在watch运行之前已经生成了最新的CSS.

gulp.task('watch', ['browserSync', 'sass'], function (){
  gulp.watch('app/scss/**/*.scss', ['sass']); 
  // Other watchers
});

现在,当运行命令gulp watch ,Gulp会同时启动sass和browserSync任务。当它们完成后,watch会执行。

同时,一个浏览器窗口指向app/index.html,会弹出来。

如果改变styles.scss文件,会发现浏览器自动重载。

在结束这个热加载教程之前还有一件事情,既然已经做到修改.scss文件重加载,何不更进一步,当任意html或者js修改的时候重载?

我们可以多加两个watch预处理,然后在文件保存后调用browserSync.reload函数:

gulp.task('watch', ['browserSync', 'sass'], function (){
  gulp.watch('app/scss/**/*.scss', ['sass']); 
  // Reloads the browser whenever HTML or JS files change
  gulp.watch('app/*.html', browserSync.reload); 
  gulp.watch('app/js/**/*.js', browserSync.reload); 
});

到现在位置教程主要关注3件事情:

  1. 为开发启动web 服务
  2. 使用sass预处理 preprocessor
  3. 每当文件保存重载

下面我们会讲到优化资源,优化CSS和JS.

发表评论

邮箱地址不会被公开。