设置浏览器同步和配置样式和脚本的观察者

Created: November-22, 2018

注意

这个页面说明了浏览器同步， gulp-watch 和 run-sequence 之类的 gulp 插件的使用，并继续讨论****我们在 Gulpjs-workflow-automation-1 中停留的 gulp-workflow-automation。如果你降落在这里，考虑先审阅该帖子。

默认任务
监视程序任务 - 无论何时映像，都可以动态地持续构建部署就绪资产 JS | css 在发展过程中发生了变化。

让我们从浏览器同步开始。

Gulp 看门狗任务

让我们从看门狗任务开始吧。

目标是观察你在开发过程中所做的更改。任何改变，都应该触发相应的 gulp 任务。

此外，我们需要一种在浏览器上同步你的更改的功能。

浏览器同步

因此，我们需要安装 Browser Sync。

bash $ npm install browser-sync --save-dev

有了这个前提，让我们打开我们的 gulpfile.js 并添加监视功能。让我们要求浏览器同步并定义一些变量以使用其功能。

在 gulp 文件的顶部，添加以下代码段。将它放在图像压缩声明的正下方。

像这样：

//Browser-sync

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

让浏览器同步你的开发到浏览器是一个简单的配置。让我们创建一个名为 watchdog 的任务。

像这样：

$.task('watchdog', function() {

})

现在，如果我们在这里浏览浏览器同步选项，并搜索服务器设置，我们可以看到它是多么容易。

我们只需将下面的内容放在我们的看门狗任务中

Snippet - 1 - 内部看门狗样板

/*
 Initiate Browser sync
 @documentation - https://www.browsersync.io/docs/options/
 */
 sync.init({
  server: {
    baseDir: "./"
 },
 port: 8000 //change it as required
 });

将上面插入上面的看门狗样板内部。

下一个片段是定义样式的观察者，目标是重新处理已更改的 css 文件或新文件，并自动触发浏览器重新加载。

片段 - 2 - 内部看门狗样板

$.watch(['css/**/*', 'fonts/google/**/*.css'], reload).on('change', function(event) {
console.log(event.type + ':' + event.path)
if (event.type === 'deleted') {
uncache('styles', event.path);
$$.remember.forget('auto-prefixed-stylesheets', event.path);
}
sequence('optimizeStyles')
});

将上面插入上面的看门狗样板内部。

所以我们正在监控，即，

字体/ google 下 css / all css 文件下的所有 css 文件当有任何更改或添加新文件时，它会在 browsersync 声明中触发重新加载方法，该方法在 gulp 文件的顶部定义。

注意：你可能会注意到，我们将一个 .on 事件处理程序附加到观察程序。

$.watch(['css/**/*', 'fonts/google/**/*.css'], reload).on('change', function(event)

基本上，任何 CUD（Create | Update | Delete）都会触发重载函数，并将事件 Object 作为参数传递给回调函数。

回调是一个至关重要的功能，我们可以在资产删除时实现像 uncache 这样的操作。现在，事件对象具有类似的参数

路径
type - 创建/更新/删除

如果资产被删除，我们需要确保我们在早期的缩小函数中构建的缓存（通过 gulp-cached 和 gulp-remember）需要更新。

我们正在处理下面的代码片段，这是在变更回调中。

if (event.type === 'deleted') { 
uncache('styles', event.path);
$$.remember.forget('auto-prefixed-stylesheets', event.path);  
}

注意

$ - > gulp 的别名

$$ - > gulp-load-plugins 的别名

你可能还会注意到，在我编写了 uncache 调用之后，我有了一个 sequence('optimizeStyles');

序列方法，确保，同步方法默认运行在异步 javascript 中。

安装很简单

做

bash $ npm install run-sequence

然后，在浏览器同步声明下方的 gulp 文件中声明它。

var sequence = require('run-sequence');

因此，通过这种理解，脚本的观察者很容易编写。只是不同的球！

因此，将此片段添加到监视程序样板内的样式监视器下方。

Snippet - 3 - 在 Watchdog 任务样板中

/*
on addition or change or deletion of a file in the watched directories
the change event is triggered. An event object with properties like
path,
event-type
is available for perusal passed to the callback

*/
$.watch('js/**/*', reload).on('change', function(event) {
console.log(event.type + ':' + event.path)
if (event.type === 'deleted') {
uncache('scripts', event.path);
$$.remember.forget('linted-scripts', event.path);
}
sequence('optimizeScripts');
});

注意

我们在上面的代码段中使用了两个函数。

非缓存

$$。remember.forget 注意：

$ - > alul for gulp

$$ - > gulp-load-plugins 的别名

让我们在调用之前在 gulpfile.js 中的某处定义函数 uncache。

/*
Deletes a cache entry
*/
var uncache = function(cacheName, cacheKey) {
        var cache = $$.cached;
        if (cache.caches[cacheName] && cache.caches[cacheName][cacheKey])
            return delete cache.caches[cacheName][cacheKey];
        return false;
    }
    /*
    logs current cache created via gulp-cached
    */
var viewCache = function() {
    console.log($$.cached.caches)
}