我使用BrowserSync编写了一个监视任务来监视我的项目,但我遇到了一个无法解决的问题。这个任务并不是太复杂,它监视文件,然后在必要时重新加载浏览器并编译sass或js(browserify)。
问题是,当我保存一个js文件(比如说,
对我来说最完美的是能够禁用自动刷新并手动触发它,这样我就可以保留我的逻辑来编译,然后在处理完成后触发浏览器刷新。 BrowserSync有一个方法来触发刷新,但我该如何停止默认的刷新? 以下是js代码,请注意,我不想包含任何其他模块,比如watchify等。
问题是,当我保存一个js文件(比如说,
app.js
),它会刷新浏览器,然后编译js并创建bundle.js
文件,这也会触发浏览器刷新。所以我总是得到至少2次刷新。有时甚至会一直循环刷新10-15次。对我来说最完美的是能够禁用自动刷新并手动触发它,这样我就可以保留我的逻辑来编译,然后在处理完成后触发浏览器刷新。 BrowserSync有一个方法来触发刷新,但我该如何停止默认的刷新? 以下是js代码,请注意,我不想包含任何其他模块,比如watchify等。
// Dependancies
// ---------------------------
var browserSync = require("browser-sync");
var sass = require('node-sass');
var fs = require('fs');
var sys = require('sys');
var exec = require('child_process').exec;
var chalk = require('chalk');
// Used to create & listen for events
var emit = browserSync.emitter;
// Start BrowserSync
browserSync({
files: [
'views/**',
'assets/js/**',
'assets/sass/**'
],
proxy: "localhost:8080",
ghostMode: false,
open: false,
port: 9090,
watchOptions: {
reloadDelay: 1000,
debounceDelay: 1000
}
});
// When a file is changed
emit.on("file:changed", function (res) {
// On file save, the `file:changed` event is fired twice.
// Only listen for the `core` response.
if(res.namespace !== 'core') return false;
// File extention
var ext = res.path.split('.').pop();
// Emit the compile events when appropriate
switch(ext){
case 'scss':
emit.emit('compile-sass');
break;
case 'js':
emit.emit('compile-js');
break;
}
});
// Compile Sass Event
emit.on("compile-sass", function(){
sass.render({
file: 'assets/sass/styles.scss',
outFile: 'assets/css/styles.css',
sourceMap: true,
sourceMapEmbed: true,
outputStyle: 'compressed',
success: function(result) {
console.log("[" + chalk.blue('SS') + "] " + chalk.cyan("Watch:") + " Sass -> Css Compiling Successful");
// Write the results to the css file
fs.writeFile("assets/css/styles.css", result.css, function(err) {
if(!err) return console.log("[" + chalk.blue('SS') + "] " + chalk.cyan("Watch:") + chalk.magenta(' styles.css') + " saved successfully");
console.log("[" + chalk.blue('SS') + "] " + chalk.cyan("Watch:") + "There was an error writing to styles.css", err);
});
}
});
});
// Compile Js Event
emit.on("compile-js", function(){
exec("browserify assets/js/app.js -o assets/js/bundle.js --debug", function (err, stdout, stderr) {
if(err) throw err;
console.log("[" + chalk.blue('SS') + "] " + chalk.cyan('Watch:') + chalk.magenta(' bundle.js') + ' successfully created');
});
});