I am using Gulp to compile and minify my SASS. This works fine, but I want to extend the automation by using BrowserSync.
I've followed the instructions on a few tutorial sites but cannot get it working - the browser does not refresh when I update either my .scss or .html files, not do any errors appear on the Terminal.
My gulpfile.js is as such. Would anyone know why browserSync fails to run?
(ps running gulp browserSync does sucessfully open the browser window and index file with http://localhost:3000/ but there is no automatic refreshing).
const gulp = require('gulp');
const sass = require('gulp-sass');
const cssnano = require('gulp-cssnano');
const browserSync = require('browser-sync').create();
// Normal .scss compilation
gulp.task('sass', function(){
return gulp.src('scss/main.scss')
.pipe(sass())
.pipe(gulp.dest('dist/css'))
});
// Minifys .css, is meant to reload browser
gulp.task('mini-css', function() {
return gulp.src('dist/css/main.css')
.pipe(cssnano())
.pipe(gulp.dest('dist/css'))
.pipe(browserSync.reload({
stream: true
}));
});
// Do both of the above
gulp.task('do-sass', gulp.series('sass', 'mini-css'))
gulp.task('watch', function(){
gulp.watch('scss/**/*.scss', gulp.series('do-sass'));
gulp.watch("*.html").on('change', browserSync.reload);
});
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: './'
},
})
})
Your watch task should be your default task. Try to put the browserSync.init() in the watch task und then start your gulp with gulp watch
const gulp = require('gulp');
const sass = require('gulp-sass');
const cssnano = require('gulp-cssnano');
const browserSync = require('browser-sync').create();
// Normal .scss compilation
gulp.task('sass', function(){
return gulp.src('scss/main.scss')
.pipe(sass())
.pipe(gulp.dest('dist/css'))
});
// Minifys .css, is meant to reload browser
gulp.task('mini-css', function() {
return gulp.src('dist/css/main.css')
.pipe(cssnano())
.pipe(gulp.dest('dist/css'))
.pipe(browserSync.reload({
stream: true
}));
});
// Do both of the above
gulp.task('do-sass', gulp.series('sass', 'mini-css'))
gulp.task('watch', function(){
browserSync.init({
server: {
baseDir: './'
}
});
gulp.watch('scss/**/*.scss', gulp.series('do-sass'));
gulp.watch("*.html").on('change', browserSync.reload);
});
Related
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', done => {
gulp.src('./css/**/*.sass')
.pipe(sourcemaps.init())
.pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('.'));
done()
});
gulp.task('sass:watch', done => {
gulp.watch('./css/**/*.sass', gulp.series('sass'));
done()
});
gulp.task('compressed-js', done => {
gulp.src('js/src/*.js')
.pipe(uglify())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('js'));
done()
});
gulp.task('compressed-js:watch', done => {
gulp.watch('./js/src/*.js', gulp.series('compressed-js'));
done()
});
In the phpstorm getting this error: "ReferenceError: sourcemaps is not defined"
The error is pretty self-explanatory: you're referring to the sourcemaps variable while it doesn't exist.
Normally, you would need to declare it at the top of your gulpfile, like so:
var sourcemaps = require('gulp-sourcemaps');
However, Gulp 4 has sourcemap functionality built-in, so you can rewrite your sass task like this:
gulp.task('sass', () =>
gulp.src('./css/**/*.sass', { sourcemaps: true })
.pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError))
.pipe(gulp.dest('.', { sourcemaps: '.' }))
);
Note that I removed the done callback, which isn't needed if you just return the stream.
Note that you will run into the same problem when running the compressed-js task. You'll need to define uglify and rename:
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
And make sure the packages you require are installed.
In my project i use gulp + browsersync. After update gulp v.4.0.0., browsersync not working and my styles not compiled when watch run (only after in manual restart gulp watch).
This is my gulpfile.js:
var gulp = require('gulp'),
sass = require('gulp-sass'),
browserSync = require('browser-sync'),
concat = require('gulp-concat'),
uglify = require('gulp-uglifyjs'),
cssnano = require('gulp-cssnano'),
rename = require('gulp-rename'),
del = require('del'),
imagemin = require('gulp-imagemin'),
pngquant = require('imagemin-pngquant'),
autoprefixer = require('gulp-autoprefixer');
gulp.task('sass', function(){
return gulp.src('app/scss/**/*.scss')
.pipe(sass())
.pipe(autoprefixer(['last 15 versions', '> 1%'], {cascade: true}))
.pipe(cssnano())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('css'))
.pipe(browserSync.reload({stream: true}))
});
gulp.task('css-libs', gulp.parallel('sass'), function(){
return gulp.src('app/css/main.css')
.pipe(cssnano())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('app/css'));
});
gulp.task('browser-sync', function(){
browserSync({
server: {
//baseDir: 'app'
baseDir: './'
},
notify:false
})
});
gulp.task('watch', gulp.parallel('browser-sync', 'css-libs'), function(){
gulp.watch('app/scss/*.scss', ['sass']);
gulp.watch('*.html', browserSync.reload);
});
How to fix it?
UPD
This is my package.json
Gulp-watch not working when i change scss file.
I believe your 'watch' task should be rewritten like so:
gulp.task('browser-sync', function(){
// note the .init
browserSync.init({
server: {
//baseDir: 'app'
baseDir: './'
},
notify:false
})
});
gulp.task('watch', gulp.parallel('browser-sync', 'css-libs', function(done){
// change in the previous line and the following line
gulp.watch('app/scss/*.scss', gulp.series('sass'));
gulp.watch('*.html', browserSync.reload);
done();
}));
so that the function call with the watches is part of the gulp.parallel call. See the parallel tasks documentation and gulp.task signature.
gulp.task('default', gulp.parallel('one', 'two', function(done) {
// do more stuff
done();
}));
So basically what I'm trying to do is to make the browser refresh whenever there is a change in the files using browserSync, compiles Pug templates, then Parceljs does the bundling. And Gulp is to watch for changes.
The overall objective is a static website/page.
The problem:
If parcel fails building. browserSync exits. Watch stops.
[12:31:41] 'parcel' errored after 3.83 s
[12:31:41] Error in plugin "gulp-parcel"
[12:31:41] The following tasks did not complete: browserSync
[12:31:41] Did you forget to signal async completion?
OS: Windows 10
Thanks!!
Gulpfile.js content:
"use strict";
var gulp = require('gulp');
var parcel = require('gulp-parcel');
var pug = require('gulp-pug');
var browserSync = require('browser-sync').create();
gulp.task('html', function () {
return gulp.src('src/templates/*.pug')
.pipe(pug())
.pipe(gulp.dest('build/html'))
.pipe(browserSync.reload({
stream: true
}));
});
gulp.task('parcel', function () {
return gulp.src('build/html/*.html', {
read: false
})
.pipe(parcel())
.pipe(browserSync.reload({
stream: true
}));
});
gulp.task('browserSync', function () {
browserSync.init({
server: {
baseDir: 'dist'
},
});
});
gulp.task('watch', gulp.parallel('browserSync',gulp.series('html', 'parcel')), function () {
gulp.watch('src/templates/**/*.pug', gulp.series('html', 'parcel'));
});
gulp.task('default', gulp.series('watch'), function(){
console.log('Started default');
});
After investigating a bit, the gulp-parcel plugin had a bug which is still being worked on. Meanwhile, I was able to come up with a workaround.
Upgraded to es6
Implemented 'gulp-run-command' to run Parcel in watch mode
Here is my new solution:
'use strict';
import gulp from 'gulp';
import babel from 'gulp-babel';
import browserSync from 'browser-sync';
import run from 'gulp-run-command';
import log from 'fancy-log';
import errorHandler from 'gulp-error-handle';
const server = browserSync.create();
const paths = {
parcel: {
dist: 'dist/*'
}
};
gulp.task('parcel', run('parcel watch src/templates/index.pug --public-url ./ --no-cache'));
const reload = done => {
server.reload();
done();
};
const serve = done => {
server.init({
server: {
baseDir: 'dist/'
}
});
done();
};
const watch = done => {
gulp.watch(paths.parcel.dist, gulp.series(reload));
done();
};
const dev = gulp.parallel('parcel', serve, watch);
export default dev;
Gulp setup is working fine for me in local.
But i want like if i change files in local then it will build and uploaded to live server automatically (minified css and js/compiled css/js).
I have tried gulp-rsync, vinyl-ftp but couldn't succeed may be i don't know how to use above packages.
Here is a my gulp file.
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var useref = require('gulp-useref');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var cssnano = require('gulp-cssnano');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
var del = require('del');
var runSequence = require('run-sequence');
// Development Tasks
// -----------------
// Start browserSync server
gulp.task('browserSync', function() {
browserSync({
server: {
baseDir: 'app'
}
})
})
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss and children dirs
.pipe(sass().on('error', sass.logError)) // Passes it through a gulp-sass, log errors to console
.pipe(gulp.dest('app/css')) // Outputs it in the css folder
.pipe(browserSync.reload({ // Reloading with Browser Sync
stream: true
}));
})
// Watchers
gulp.task('watch', function() {
gulp.watch('app/scss/**/*.scss', ['sass']);
gulp.watch('app/*.html', browserSync.reload);
gulp.watch('app/js/**/*.js', browserSync.reload);
})
// Optimization Tasks
// ------------------
// Optimizing CSS and JavaScript
gulp.task('useref', function() {
return gulp.src('app/*.html')
.pipe(useref())
.pipe(gulpIf('*.js', uglify()))
.pipe(gulpIf('*.css', cssnano()))
.pipe(gulp.dest('dist'));
});
// Optimizing Images
gulp.task('images', function() {
return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
// Caching images that ran through imagemin
.pipe(cache(imagemin({
interlaced: true,
})))
.pipe(gulp.dest('dist/images'))
});
// Copying fonts
gulp.task('fonts', function() {
return gulp.src('app/fonts/**/*')
.pipe(gulp.dest('dist/fonts'))
})
// Cleaning
gulp.task('clean', function() {
return del.sync('dist').then(function(cb) {
return cache.clearAll(cb);
});
})
gulp.task('clean:dist', function() {
return del.sync(['dist/**/*', '!dist/images', '!dist/images/**/*']);
});
// Build Sequences
// ---------------
gulp.task('default', function(callback) {
runSequence(['sass', 'browserSync'], 'watch',
callback
)
})
gulp.task('build', function(callback) {
runSequence(
'clean:dist',
'sass',
['useref', 'images', 'fonts'],
callback
)
})
And here is a my folder structure.
This is main folder
It's a development folder
And this one is production folder in which all files are build.
I have created a gulpfile.js which works fine so far but as soon I try to add browser-sync and I change my .scss-file I get this error ParseError: unexpected token and I have no clue why this happens. Another thing is, that even though in my server.js I have set app.listen(3000) it opens a window with localhost:3001???
Here is my gulpfile.js:
var gulp = require('gulp'),
connect = require('gulp-connect'),
uglify = require('gulp-uglify'),
sass = require('gulp-ruby-sass'),
webserver = require('gulp-webserver'),
browserify = require('gulp-browserify'),
browserSync = require("browser-sync").create();
gulp.task('browser-sync', function(){
browserSync.init({
server: {
baseDir: "./public"
}
});
})
gulp.task('styles', function() {
return sass('public/scss/*.scss')
.pipe(browserify())
.pipe(uglify())
.pipe(gulp.dest('public/css'));
});
gulp.task('watch', function(){
gulp.watch('public/scss/*.scss', ['styles'])
})
gulp.task('webserver', function() {
gulp.src('root')
.pipe(webserver({
livereload: true,
directoryListing: true,
port: 3000
}));
});
gulp.task('default', ['webserver', 'watch', 'browser-sync'])
So, does anyone know what I'm doing wrong??