I've started using gulp for a few projects, mainly to watch my sass files.
Recently every time I go back to a project, I browse to it in terminal type 'gulp watch' and all that happens is gulp starts, runs 'watch' and finishes the task and my files aren't actually being watched.
I've had this working in numerous projects but all of a sudden I can't 'restart' work on anything as what I explained above happens.
Am i doing something obviously wrong?
Edit: here is some more info:
npm: 1.4.21
Gulp file:
var gulp = require('gulp'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer');
// SASS build
gulp.task('sass', function () {
gulp.src('./sass/styles.sass')
.pipe(sass({errLogToConsole: true}))
.pipe(autoprefixer('last 2 versions'))
.pipe(gulp.dest('./css'));
});
// Watch files
gulp.task('watch', function () {
gulp.watch('./sass/**/*.sass', ['sass']);
});
gulp.task('default', ['watch', 'sass', 'autoprefixer']);
Related
When I run Gulp the UI page works on http://localhost:3001, but on http://localhost:3000 the browser serves a blank page that is stuck loading, no console errors.
I'm using WAMP on Windows 10, Gulp version 3.9.1, BrowserSync version 2.24.4.
This setup was working fine until recently, this has me stumped.
gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var uglify = require('gulp-uglify');
var rename = require("gulp-rename");
var sourcemaps = require('gulp-sourcemaps');
var browserSync = require('browser-sync').create();
gulp.task('sass', function(){
return gulp.src('sass/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
.pipe(autoprefixer('last 2 versions'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('css'))
.pipe(browserSync.stream());
});
gulp.task('compress', function () {
gulp.src('scripts/js/*.js')
.pipe(sourcemaps.init())
.pipe(uglify())
.pipe(sourcemaps.write())
.pipe(rename({ suffix: '-min' }))
.pipe(gulp.dest('scripts/minified/'));
});
gulp.task('browserSync', function() {
browserSync.init({
proxy: "experiments"
});
});
gulp.task('watch',['browserSync', 'sass', 'compress'], function(){
gulp.watch('sass/*.scss', ['sass']);
gulp.watch('scripts/js/*.js', ['compress']);
gulp.watch('*.php', browserSync.reload);
gulp.watch('*.html', browserSync.reload);
gulp.watch('scripts/minified/*.js', browserSync.reload);
})
Terminal output
[17:24:44] Using gulpfile ~\Documents\Web Design Local\host\experiments\gulpfile.js
[17:24:44] Starting 'browserSync'...
[17:24:44] Finished 'browserSync' after 9.99 ms
[17:24:44] Starting 'sass'...
[17:24:44] Starting 'compress'...
[17:24:44] Finished 'compress' after 2.2 ms
[Browsersync] 1 file changed (universal.css)
[17:24:45] Finished 'sass' after 174 ms
[17:24:45] Starting 'watch'...
[17:24:45] Finished 'watch' after 17 ms
[Browsersync] Proxying: http://experiments
[Browsersync] Access URLs:
--------------------------------------
Local: http://localhost:3000
External: http://redacted:3000
--------------------------------------
UI: http://localhost:3001
UI External: http://redacted:3001
--------------------------------------
Also looks like the ports are established correctly? Here's before the gulp task is run...
And after...
This problem was driving me nuts too because recently my proxys stopped working as well. I was trying to think what I changed - finally I realized I upgraded MalwareBytes to the latest version and it's firewall settings were messing with my ports. I disabled it and now it is working.
I hope this can help someone!
I've set up gulp + browsersync as a test and I think – after some messing about and doc reading – you can change this:
gulp.task('browserSync', function() {
browserSync.init({
proxy: "experiments"
});
});
to this:
gulp.task('browser-sync', function() {
browserSync.init({
proxy: 'experiments',
host: 'experiments',
open: 'external'
});
});
...and it'll work.
Notes:
If unset, host defaults to null.
open is the browser action to take and defaults to true. Other options include false to NOT open a browser, and external as used here to open the URL specified in host.
I'd also suggest you use an extension, even if it is just for organisation in your Filesystem, vhosts setup and/or WAMP lists etc. .dev is useless over http in chrome these days, and .local messes with Multicast DNS services. I use .mere, you could use .pix ;) - your safest most future-proof bet is to use .test as per RFC 6761
After installing new windows I had the same issue where the browser keep loading without initialising the project.
the issue was Browser Sync package needed an update so I had done the following
run the terminal as administrator
cd into the project folder
rm -rf node_modules (if you already have the package.json file)
npm install
also you might need to rebuild the node-sass so you could use the following
npm rebuild node-sass
then run the gulp project and everything should work fine
when you go to experiments in the browser does it work?
It could be a browser update rather than gulp
I would try changing your host to dev.experiments.co.uk
then change the proxy to dev.experiments.co.uk
I REALLY hope this isnt a duplicate but i have searched countless posts on here and cant find this specific issue, hopefully the stackoverflow community can help
I am new to Gulp and Sass and am in the process of setting up a simple template to experiement and prepare future projects, but ive hit a snag
i have the following folder structure for testing (il adjust this when its all working to be better)
Template
-- node_modules
-- stylesheets
-----test.scss
-----test.css (generated by the gulpfile.js)
gulpfile.js
package.json
my gulp file is as follows, a simple watch on test.scss to create and update test.css
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('styles', function() {
return gulp.src('stylesheets/**/*.scss')
.pipe(sass().on('error', sass.logError));
});
//Watch task
gulp.task('default',function() {
gulp.watch('stylesheets/**/*.scss', ['styles']);
});
Now when i run gulp and save a style in test.scss i get something like this in cmd
Starting 'styles'...
Finished 'styles' after 49 ms
So i believe there are no errors, however when i look in the test.css file that is created / updated there are no styles!
it does however copy over comments... so if i put in /* comment / into test.scss then sure enough / comment */ appears in text.css
gulp-sass installed succesfully but im really confused as to what im missing
Thanks in advance
James
P.S, versions of things etc, i also have a XAMPP webserver set up locally
Node => v6.11.1,
gulp => CLI version 1.3.1, Local version 3.9.1,
ruby => 2.4.1p111,
sass => 3.5.1 (Bleeding Edge)
npm => 3.10.10
I think
gulp.task('styles', function() {
return gulp.src('stylesheets/**/*.scss')
.pipe(sass().on('error', sass.logError));
});
should be
gulp.task('styles', function() {
return gulp.src('stylesheets/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./stylesheets'));
});
I'd like to not only have gulp watch watch for changes to specified files, but also to the gulpfile.js itself. Notably, I'm using Laravel and its Elixir asset management tool, which wraps Gulp.
I came across this link which seems to be exactly what I need but when I implement it and then type either gulp watch or gulp and then make changes to my gulpfile those changes aren't reflected.
I'm pretty sure I need to add something to the elixir but not sure what. I have the following for bower but probably need something similar for watch.
Here's the relevant contents of my gulpfile:
/*gulpfile.js*/
gulp.slurped = false; // step 1
gulp.task("watch", function(){
if(!gulp.slurped){ // step 2
gulp.watch("gulpfile.js", ["default"]);
//gulp.watch("etc...");
gulp.slurped = true; // step 3
}
});
gulp.task("default", ["some-task", "another-task", "watch"]);
gulp.task('bower', function() {
return bower();
});
elixir(function(mix) {
// Run bower install
mix.task('bower');
//mix.task('default'); //uncommenting this causes an error when running "gulp"
//mix.task('watch'); //uncommenting this causes an error when running "gulp"
// all other elixir.mix tasks...
mix.copy('resources/assets/js/**', 'public/js');
gulper is one possible answer: https://github.com/anatoo/gulper
So instead of running gulp watch you can run gulper watch
So I like elixir a lot.
But when I run gulp watch and write css (scss to be precise), it crashes after a couple of saves, thus forcing me to start gulp watch again. And it is driving me crazy, almost to the point of me not being able to do my work.
I have looked at stackoverflow at people with similar looking problems, but to no prevail. I have also found a few articles like this: http://maximilianschmitt.me/posts/prevent-gulp-js-from-crashing-on-error/
But either their solution is outdated, or I'm too stupid to use their solution correctly. Most likely the latter...
Here is my gulp.js file:
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix
.sass('styles.scss', 'public/css')
.scripts(null,
'public/js/all.js',
'resources/assets/js'
)
.version([
'public/css/styles.css',
'public/js/all.js'
])
});
Any ideas how to fix this?
The problem
gulp watch is set to stop when an error is detected, thus forcing the need to do a manual restart of gulp watch. Irritating.
The solution (not elegant, but it works)
First, my gulp.js as is now:
var gulp = require('gulp'),
elixir = require('laravel-elixir'),
plumber = require('gulp-plumber');
gulp.task('default', function() {
});
gulp.task('watch', function() {
gulp.watch('resources/**', ['default']);
elixir(function(mix) {
mix
.sass('styles.scss', 'public/css')
.scripts(null,
'public/js/all.js',
'resources/assets/js'
)
.version([
'public/css/styles.css',
'public/js/all.js'
])
}).pipe(plumber());
});
What I did:
I installed gulp plumber $ npm install --save-dev gulp-plumber
I required gulp plumber and the base gulp dependency to my gulp file
I defined an empty default task, otherwise gulp wouldn't play with me...
I created a gulp task called "watch", otherwise gulp watch wouldn't work in the command line like before.
I defined the gulp.watch() to make gulp, ehh, watch?
I appended .pipe(plumber()); at the end if my elixir function. The plumber is the thing that prevents the gulp watcher from crashing on error
So, to make it easy for you, copy paste the code below into your gulp.js file , run $ npm install --save-dev gulp-plumber, and fill in your own mix
var gulp = require('gulp'),
elixir = require('laravel-elixir'),
plumber = require('gulp-plumber');
gulp.task('default', function() {
});
gulp.task('watch', function() {
gulp.watch('resources/**', ['default']);
elixir(function(mix) {
//Your own elixir code as you know it.
}).pipe(plumber());
});
Note you'll be getting an error in the command line / terminal when you run gulp watch. Ignore it. Try to save an scss or js file, reload the brwoser, and you'll see gulp and elixir is doing their job just fine.
The error:
CATCHES!!!
Running gulp does nothing now.
If you make a syntax error, the watcher stops until you fix the error. However, you don't have to manually restart it. Say, if you miss a ; in your scss, it'll work again as soon as you add the ; and save.
NOTE: This is a hack. Not very elegant. But it works. According to contra in this thread: https://github.com/gulpjs/gulp/issues/71 gulp v.4.x.x should fix the problem of gulp watch crashing on finding an error
So I just got my hands dirty with Gulp. I have never worked with Grunt, but it seems that Gulp is the new big thing. Everything seems to work fine. I have successfully compiled SCSS into CSS with the following gulpfile.js:
// Include gulp
var gulp = require('gulp');
// Include Our Plugins
var sass = require('gulp-sass');
var rename = require('gulp-rename');
// Compile Our Sass
gulp.task('sass', function() {
return gulp.src('./scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});
// Rerun the task when a file changes
gulp.task('watch', function () {
gulp.watch('scss/**/*.scss', ['sass']);
});
// Default Task
gulp.task('default', ['sass', 'watch']);
Thing is: When I run Gulp default in the terminal it starts the script, but never ends it. I'm assuming this is the point, that in order for Gulp to watch my files - it has to keep running.
It's on standby with this:
[gulp] Running 'sass'...
[gulp] Finished 'sass' in 8.47 ms
If that's the case - how do I stop it from running without closing and reopening the Terminal? I'm sorry if this is simple but i have no clue when it comes to the Terminal.
gulp watch is designed to watch the file changes, it acts as a running process.
The README shows an example of its usage: gulp-watch
The command: Ctrl+C will stop the process.
Once started modifying any file in the watch directive will trigger the action in the reload. You currently do not have any action for your watch, this will trigger a action when the sass files change:
gulp.watch('./scss/**/*.scss', ['sass']);