I have following in my gulp file to turn off the browser notification but it still shows up:
gulp.task('browserSync', function() {
browserSync({
server: {
baseDir: 'app',
},
notify: false
})
});
Do you know where is the problem?
For those getting in the same situation, since it automated and reloads anything I thought it reloads the gulp watch as well.
So I rerun the gulp watch and now its fixed.
Maybe you fixed this problem already but you have no result becouse you should to rerun browser-sync
Related
Short Question Version
Changes to files happen below a target directory. I have browsersync setup like this:
var bs = require("browser-sync").create();
// Start the browsersync server
bs.init({
server: './target'
});
bs.reload("*.html");
However this is not detecting changes that occur in target subdirectories and refreshing the browser. Seems that the above lines are not enough?
Long Question Version
I have built a CLI. It watches for CSS changes in src/main/css and compiles the CSS (Using PostCSS) to target/main/css. The same is enabled for html templates in src/main/html.
Gaze watches for file changes and runs the functions that performs the compiling and this part works fine.
The full source code can be seen here.
I was hoping BrowserSync would pickup on the file changes in the target directory and refresh the browser when edits are performed, however I'm not seeing any refreshes. I have BrowserSync setup like this within the serve command:
var bs = require("browser-sync").create();
// Start the browsersync server
bs.init({
server: './target'
});
bs.reload("*.html");
The CLI can be tested by doing:
git clone https://github.com/superflycss/cli
cd cli
npm i -g
Or just install from NPM:
npm i -g #superflycss/cli
Then run:
sfc new project
cd project
sfc serve
The target folder will open up in the browser. Change the URL to http://localhost:3000/test/html/. Edit the html in src/test/html/index.html. The changes compile to target/test/html/index.html and BrowserSync should pickup on the changes IIUC...but it's not...
Thoughts?
It's pretty obvious, but bs.reload("*.html"); has to be called from within the on event of the watcher. So in other words whenever there is a file change call bs.reload("*.html");.
Since I'm using gaze to watch for file changes, I ended up doing this:
gaze(PLI.SRC_MAIN_CSS, (err, watcher) => {
if (err) {
log('error', 'Error buliding src/main/css/ content.');
throw new Error(err);
}
/**
* Triggered both when new files are added and when files are changed.
*/
watcher.on('changed', function (filepath) {
buildMainCSS();
bs.reload("*.html");
});
});
Problem: I'm learning ES6 through playing around with the code. I found that it's quite annoying to rebuild and restart the server every time I made any changes.
Goal: I want the changes that I saved to be reflected on the browser, without having to manually rebuild, and restart the server. What's the simplest way to do that?
Background:
The current script configuration in the package.json file is as below.
"scripts": {
"babel": "babel --presets es2015 js/main.js -o build/main.bundle.js",
"start": "http-server -p 9000"
},
I hope this is clear. Thank you!
I believe you must be using gulp tasks to run your project. If so, browser-sync + gulp.watch() is the best option for this. Below is what working for me, add something like below to your gulp task .js file. Whenever you change and save your es6 source code, it will automatically build and refresh the browser.
var gulp = require('gulp');
var browser = require('browser-sync').create();
// your default task goes here that should add "watch-changes" as dependency
// watch changes in js and html files
gulp.task('watch-changes', function() {
browser.init({
// initiate your browser here, refer browser-sync website
});
gulp.watch(
['build/main.bundle.js', 'webapp/**/*.html'],
browser.reload);
});
Check here neat example.
Refer browser-sync website and npm gulp-watch task
SOLUTION:
Renaming _styles.scss to test.scss and _styles.css to test.css fixed it. Why?
It was working fine earlier. Now nothing is being compiled.The css files are not being created and are empty or not updated.
terminal:
asd#dsa:/var/www/html/mg/app/design/frontend/Training/default$ sudo gulp default
[sudo] password for asd:
[14:50:48] Using gulpfile /var/www/html/mg/app/design/frontend/Training/default/gulpfile.js
[14:50:48] Starting 'default'...
[14:50:48] Finished 'default' after 14 ms
^C
asd#dsa:/var/www/html/mg/app/design/frontend/Training/default$ sudo gulp styles
[14:50:56] Using gulpfile /var/www/html/mg/app/design/frontend/Training/default/gulpfile.js
[14:50:56] Starting 'styles'...
[14:50:56] Finished 'styles' after 13 ms
asd#dsa:/var/www/html/mg/app/design/frontend/Training/default$ sudo gulp pub
[14:51:02] Using gulpfile /var/www/html/mg/app/design/frontend/Training/default/gulpfile.js
[14:51:02] Starting 'pub'...
[14:51:02] Finished 'pub' after 12 ms
gulpfile.js:
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('styles', function() {
gulp.src('web/sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('web/css/'));
});
gulp.task('pub', function() {
gulp.src('web/sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('../../../../../pub/static/frontend/Scandi/default/en_US/css/'));
});
gulp.task('default', function() {
gulp.watch('web/sass/**/*.scss',['styles']);
});
Gulp-sass will happily compile everything that is not a Sass partial automatically whenever it changes.
By default, every Sass file that is prefixed with an underscore is a partial, and meant to be imported into one or more Sass 'master' files.
In practice, this means that you need at least one Sass file not prepended with an underscore for compilation to work/output properly.
In your case, simply rename _styles.scss to styles.scss and that should result in a styles.css in your target CSS directory. :)
Partials allows you to organize your Sass source code in very neat ways, see The Sass Way - How to structure a Sass project
I am having difficulties with livereload in my gulp file.
If I run livereload.listen() as part of my watch task it works.
gulp.task('watch', function() {
livereload.listen();
gulp.watch('app/styles/**/*.less', ['less']);
});
// run gulp watch
However, if I launch live reload as separate task in another term window before watch it does not work.
gulp.task('lr', function() {
livereload.listen();
});
gulp.task('watch', function() {
gulp.watch('app/styles/**/*.less', ['less']);
});
// run gulp lr in one terminal and gulp watch in another - after.
I've tried using the gulp-connect plugin with the same result. Something about the watch task being run separately. I can see livereload loaded in the browser in all cases and watch runs correctly.
What is happening and is it possible to run these as 2 tasks (note that I am not interested in joining the tasks as one. That's not the goal of this question).
I'm trying to use Polymer with a Jekyll site, but I can't figure out how to get things set. I downloaded and can run the Polymer Starter Kit. Polymer has the page contents in the app directory, but if I try to set up and run Jekyll from this folder, I get a load of errors because the Polymer index.html can't find the resources (because the root directory is different).
What is the correct way to set-up and structure for Jekyll and Polymer to work together?
Reading polymer started kit readme.md paragraph development workflow you learn that :
gulp serve is made for development phase and gulp makes a build of your application, ready to be deployed on a web server.
Just copying what you've downloaded from github on a web server will not work as is, because gulp serve is more complex than this. Read the gulpfile.js and you will see all what is done by the gulp serve command.
You need to do a gulp and you then can deploy what is generated in the dist folder. This will work in a jekyll site.
You can integrate gulp-jekyll in your gulp build process. I'd also consider watching changes in your browser-sync to automatically generate html files on change. Vulcanization process should be done only when you are deploying.
I just came back to this, and things are much improved since last summer. I made a gulpfile based on that for the Polymer Starter Kit (1.2.3). But I changed the behavior of the default and serve tasks to run Jekyll serve and build in the shell:
var spawn = require('child_process').spawn;
var argv = require('yargs').argv;
gulp.task('jekyllbuild', function(done) {
return spawn('bundle', ['exec', 'jekyll', 'build'], { stdio: 'inherit' })
.on('close', done);
});
// Build production files, the default task
gulp.task('default', ['clean'], function(cb) {
// Uncomment 'cache-config' if you are going to use service workers.
runSequence(
'jekyllbuild',
['ensureFiles', 'copy', 'styles'],
'elements',
['images', 'fonts', 'html'],
'vulcanize', // 'cache-config',
cb);
});
gulp.task('serve', function(done) {
if (argv.port) {
return spawn('bundle', ['exec', 'jekyll', 'serve', '--port=' + argv.port], { stdio: 'inherit' })
.on('close', done);
} else {
return spawn('bundle', ['exec', 'jekyll', 'serve'], { stdio: 'inherit' })
.on('close', done);
}
});
Using BrowserSync would have a much cleaner effect, but this is a simple way to get Jekyll functionality and the benefit of vulcanization for production. (Note that you also have to install the yargs package to handle port specification.) My whole gulpfile is here.