I've installed browserSync to get my browsers to auto refresh if I update CSS or html templates.
In my gulp file:
var browserSync = require('browser-sync').create();
And down by my watch tasks:
// Static Server + watching scss/html files
gulp.task('serve', ['app-css'], function() {
browserSync.init({
// server: "./app"
proxy: 'http://localhost/static/dashboard/app/'
});
gulp.watch("sass-smacss/sass/**/*.scss", ['app-css']);
gulp.watch("app/**/*.html").on('change', browserSync.reload);
});
I have a local server so that is the link I'm using for my proxy
above.
Anyways I ran gulp serve
and it automatically launched a new Chrome window with this path: http://localhost:3000/static/dashboard/app/#/login
Next I then just hit save in one of my sass files and it threw the following error:
[21:52:37] Starting 'app-css'... /Users/leongaban/Projects/TickerTags/dashboard/node_modules/browser-sync/lib/file-utils.js:48 if (!_.contains(options.get("injectFileTypes").toJS(), obj.ext)) { ^
TypeError: _.contains is not a function
at Object.fileUtils.getFileInfo (/Users/leongaban/Projects/TickerTags/dashboard/node_modules/browser-sync/lib/file-utils.js:48:16)
at Object.fileUtils.changedFile (/Users/leongaban/Projects/TickerTags/dashboard/node_modules/browser-sync/lib/file-utils.js:26:57)
at EventEmitter.events.file:changed (/Users/leongaban/Projects/TickerTags/dashboard/node_modules/browser-sync/lib/internal-events.js:13:23)
at emitOne (events.js:77:13)
at EventEmitter.emit (events.js:169:7)
at Object.emitChangeEvent (/Users/leongaban/Projects/TickerTags/dashboard/node_modules/browser-sync/lib/public/public-utils.js:13:17)
at Transform.reload._transform (/Users/leongaban/Projects/TickerTags/dashboard/node_modules/browser-sync/lib/public/stream.js:70:31)
at Transform._read (_stream_transform.js:167:10)
at Transform._write (_stream_transform.js:155:12)
at doWrite (_stream_writable.js:292:12)
Here is the /node_modules/browser-sync/lib/file-utils.js:48
/**
* @param data
* @param options
* @returns {{assetFileName: *, fileExtension: String}}
*/
getFileInfo: function (data, options) {
data.ext = require("path").extname(data.path).slice(1);
data.basename = require("path").basename(data.path);
var obj = {
ext: data.ext,
path: data.path,
basename: data.basename,
type: "inject"
};
// RELOAD page
if (!_.contains(options.get("injectFileTypes").toJS(), obj.ext)) {
obj.url = obj.path;
obj.type = "reload";
}
obj.path = data.path;
obj.log = data.log;
return obj;
}
Per @Phil https://github.com/BrowserSync/browser-sync/issues/976
Had to upgrade lodash and now it works.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.