I'm trying to setup Gulp browserSync for our development environment at work and I've got it working, but when I change something in sass for the first time, it doesn't refresh. But when I change it again, then it does work but it changes to the adjustment of the fist change. So it kinda has a delay of one change
This is my Gulpfile.js:
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
gulp.task('browserSync', ['sass'], function() {
browserSync.init({
proxy: "develop.work.dev"
});
});
gulp.task('sass', function() {
return gulp.src("themes/comp-fluid/sass/**/*.scss")
.pipe(sass())
.pipe(gulp.dest("themes/comp-fluid/css"))
.pipe(browserSync.reload({
stream: true
}));
});
gulp.task('watch', ['browserSync', 'sass'], function(){
gulp.watch('themes/comp-fluid/sass/**/*.scss', ['sass']);
gulp.watch('themes/comp-fluid/views/**/*.tpl').on('change', browserSync.reload);
});
Related
Here is what I have:
var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var cleanCSS = require('gulp-clean-css');
var concat = require('gulp-concat');
// GULP WATCH
gulp.task('watch', function() {
gulp.watch('assets/sass/*.sass', ['sass']);
});
// GULP SASS CONVERTER
gulp.task('sass', function(){
return gulp.src('assets/sass/style.sass')
.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(gulp.dest('assets/css/'));
});
gulp.task('cleanCSS', function(){
return gulp.src('assets/*.css')
.pipe(cleanCSS())
.pipe(concat('style.css'))
.pipe(gulp.dest('assets/css/'));
});
gulp.task('minify-css', function() {
return gulp.src('assets/css/style.css')
.pipe(cleanCSS())
.pipe(concat('style.min.css'))
.pipe(gulp.dest('assets/css/'));
});
gulp.task('default', ['sass','watch','cleanCSS','minify-css']);
My problem:
When I initially run gulp it works perfectly. As I save my files, the only function that executes is sass, but my site files link to the minified CSS so I need each function to work otherwise I don't see my changes. This issue started once I added the task minify-css.
V2 Update
var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var cleanCSS = require('gulp-clean-css');
var concat = require('gulp-concat');
// GULP WATCH
gulp.task('watch', function() {
gulp.watch('assets/sass/*.sass', ['sass']);
});
// GULP SASS CONVERTER
gulp.task('sass', function(){
return gulp.src('assets/sass/style.sass')
.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(gulp.dest('assets/css/'));
});
gulp.task('cleanCSS', function(){
return gulp.src('assets/*.css')
.pipe(cleanCSS())
.pipe(concat('style.css'))
.pipe(gulp.dest('assets/css/'));
});
gulp.task('minify-css', ['cleanCSS'], function() {
return gulp.src('assets/css/style.css')
.pipe(cleanCSS())
.pipe(concat('style.min.css'))
.pipe(gulp.dest('assets/css/'));
});
gulp.task('default', ['sass','watch','minify-css']);
As far as I can tell you have three options.
Option 1 - least preferred but least amount of changes
var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var cleanCSS = require('gulp-clean-css');
var concat = require('gulp-concat');
// GULP WATCH
gulp.task('watch', function() {
gulp.watch('assets/sass/*.sass', ['sass', 'cleanCSS', 'minify-css']);
});
// GULP SASS CONVERTER
gulp.task('sass', function(){
return gulp.src('assets/sass/style.sass')
.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(gulp.dest('assets/css/'));
});
gulp.task('cleanCSS', function(){
return gulp.src('assets/*.css')
.pipe(cleanCSS())
.pipe(concat('style.css'))
.pipe(gulp.dest('assets/css/'));
});
gulp.task('minify-css', function() {
return gulp.src('assets/css/style.css')
.pipe(cleanCSS())
.pipe(concat('style.min.css'))
.pipe(gulp.dest('assets/css/'));
});
gulp.task('default', ['sass','watch','cleanCSS','minify-css']);
While your default task is running all four tasks(sass, watch, cleanCSS and minify-css), when the watch task notices changes in one of your .sass files, it only reruns the sass task(not the default task which would run all four again). This is not preferred as I believe gulp runs these tasks in parallel and they aren't guaranteed to run in order or wait for one to finish before the next run.
Option 2 - better, but still not optimal
var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var cleanCSS = require('gulp-clean-css');
var concat = require('gulp-concat');
// GULP WATCH
gulp.task('watch', function() {
gulp.watch('assets/sass/*.sass', ['minify-css']);
});
// GULP SASS CONVERTER
gulp.task('sass', function(){
return gulp.src('assets/sass/style.sass')
.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(gulp.dest('assets/css/'));
});
gulp.task('cleanCSS', ['sass'], function(){
return gulp.src('assets/*.css')
.pipe(cleanCSS())
.pipe(concat('style.css'))
.pipe(gulp.dest('assets/css/'));
});
gulp.task('minify-css', ['cleanCSS'], function() {
return gulp.src('assets/css/style.css')
.pipe(cleanCSS())
.pipe(concat('style.min.css'))
.pipe(gulp.dest('assets/css/'));
});
gulp.task('default', ['sass','watch',]);
This is much more declarative. Now running gulp will execute the default task which will fire off the sass and watch tasks. minify-css is dependent on cleanCSS, so gulp will try to run the cleanCSS task, but that is dependent on sass, so it will run that first, then cleanCSS, then minify-css. When watch notices a change it will rerun minify-css, but will see the dependency chain and run all of them again.
Option 3 - best
gulp is different from grunt in that it uses streams so that it doesn't have to write to disk in between each task. Keeping the files in memory while manipulating them makes it operate faster. If all of these tasks need to run all of time, the best would be to combine them into one with something like the following.
var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var cleanCSS = require('gulp-clean-css');
var concat = require('gulp-concat');
// GULP WATCH
gulp.task('watch', function() {
gulp.watch('assets/sass/*.sass', ['sass']);
});
// GULP SASS CONVERTER
gulp.task('sass', function(){
return gulp.src('assets/sass/style.sass')
.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(cleanCSS())
.pipe(concat('style.css'))
.pipe(concat('style.min.css'))
.pipe(gulp.dest('assets/css/'));
});
gulp.task('default', ['sass','watch']);
This will read the files in once and write them once. The default task will execute the sass task as will the watch task when it notices changes.
Hope this helps!
I have problem. I create my own gulpfile and all works fine but i wanna add a browserify to use modules, but i want to watch this. Can you be so nice and watch at my gulpfile and said if i can add somewhere in serve task to watch also browserify? Or maybe you have better solution for this problem?
var gulp = require('gulp');
var browserSync = require('browser-sync');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var cleanCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var htmlReplace = require('gulp-html-replace');
var htmlMin = require('gulp-htmlmin');
var config = {
dist:'dist/',
src:'src/',
htmlIn:'src/*.html',
cssIn:'src/css/**/*.css',
jsIn:'src/script/**/*.js',
scssIn:'src/scss/**/*.scss',
cssOut:'dist/css',
jsOut:'dist/script',
scssOut:'src/css',
}
gulp.task('reload',function(){
browserSync.reload();
});
gulp.task('serve', ['sass','scripts'], function(){
browserSync({
server:config.src,
port:5050
});
gulp.watch([config.htmlIn, config.jsIn], ['reload']);
gulp.watch(config.scssIn, ['sass']);
})
gulp.task('sass', function(){
return gulp.src(config.scssIn)
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({
browsers:['last 3 versions']
}))
.pipe(sourcemaps.write())
.pipe(gulp.dest('src/css'))
.pipe(browserSync.stream());
})
gulp.task('mincss',function(){
return gulp.src(config.cssIn)
.pipe(cleanCSS())
.pipe(gulp.dest(config.cssOut))
})
gulp.task('minjs',function(){
return gulp.src(config.jsIn)
.pipe(uglify())
.pipe(gulp.dest(config.jsOut));
})
gulp.task('default', ['serve']);
Add another gulp watch for your browserify.
gulp.watch(config.jsIn, ['browserify']);
I am having issues trying to get LiveReload working with Gulp Connect plugin.
Below is my gulpfile.js
I have my html files in same directory as gulpfile.js and all sass files are imported into /sass/styles.scss from same folder (smacss) and other partial files in /sass/modules/*.scss
Help appreciated
var gulp = require('gulp');
var sass = require('gulp-sass');
var connect = require('gulp-connect');
gulp.task('connect', function(){
connect.server({
root: '.',
livereload: true
});
});
// keeps gulp from crashing for scss errors
gulp.task('sass', function () {
return gulp.src('./sass/*.scss')
.pipe(sass({ errLogToConsole: true }))
.pipe(gulp.dest('./css'));
});
gulp.task('livereload', function (){
gulp.src('.')
.pipe(connect.reload());
});
gulp.task('watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
gulp.watch('.', ['livereload']);
});
gulp.task('default', ['connect', 'watch', 'sass']);
Not sure if your root path is working here. Can you try root: './' or just root: '/' maybe ?
And the gulp.watch and gulp.src might need files path instead of directory path. Can you try gulp.src('./*') and gulp.watch('./*') maybe ?
This ended up working for me:
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var prefix = require('gulp-autoprefixer');
// POST CSS
var postcss = require('gulp-postcss');
var cssnext = require('postcss-cssnext');
var connect = require('gulp-connect');
gulp.task('myStyles', function () {
var processors = [
cssnext()
];
gulp.src('sass/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({outputStyle: 'expanded'}))
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('.', {
includeContent: false,
sourceRoot: '../sass'
}))
.pipe(gulp.dest('css'))
.pipe(connect.reload());
});
gulp.task('connect', function() {
connect.server({
livereload: true
});
});
gulp.task('watchMyStyles', function() {
gulp.watch('sass/*.scss', ['myStyles']);
});
gulp.task('default', ['watchMyStyles', 'connect']);
gulp.task('server', [ 'connect']);
I want to have a watch task that reloads the browser. Below watch works fine for sass compilation but the browser doesn't reload - thoughts?
// Gulp Packages
var gulp = require('gulp'),
gutil = require('gulp-util'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),
browserSync = require('browser-sync').create(),
reload = browserSync.reload;
// Default Task
gulp.task('default', ['copyFiles','styles']);
// Copy Files
gulp.task('copyFiles', function() {
gulp.src('./source/*.php').pipe(gulp.dest('./public'));
});
// Compile SASS
var sassOptions = {
errLogToConsole: true,
outputStyle: 'compressed'
};
gulp.task('styles', function() {
gulp.src('./scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./css/'));
});
// Watch Task
gulp.task('watch', function() {
gulp.watch('./scss/includes/**/*.scss', ['styles']);
gulp.watch('./scss/includes/**/*.scss').on('change', browserSync.reload);
});
I would suggest a configuration similar to:
// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {
browserSync.init({
server: "./app"
});
gulp.watch("app/scss/*.scss", ['sass']);
gulp.watch("app/*.html").on('change', browserSync.reload);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
return gulp.src("app/scss/*.scss")
.pipe(sass())
.pipe(gulp.dest("app/css"))
.pipe(browserSync.stream());
});
gulp.task('default', ['serve']);
Source: https://www.browsersync.io/docs/gulp
You need to initialise a Server and watch changes to your SASS and HTML. Then in your sass compile task you need to add .pipe(browserSync.stream()); after the dest command so browserSync can pick up your newly compiled SASS and serve it.
Finally you need to call your serve task with your default task.
Also you can take a look here https://scotch.io/tutorials/how-to-use-browsersync-for-faster-development#using-browsersync-and-sass for another example of Browsersync + Gulp + SASS.
I'm setup as outlined below. The good news: styles are being compiled, the bad news: gulp doesn't seem to watch the scss files for a change and compile automatically?
// Include gulp
var gulp = require('gulp');
// Plugins
var concat = require('gulp-concat');
var stripDebug = require('gulp-strip-debug');
var uglify = require('gulp-uglify');
var include = require('gulp-include');
var sass = require('gulp-sass');
var minifycss = require('gulp-minify-css');
// Styles
gulp.task('styles', function() {
gulp.src('./_themes/blanktheme/ui/scss/styles.scss')
.pipe(include())
.pipe(sass({
errLogToConsole: true
}))
.pipe(minifycss())
.pipe(gulp.dest('./_themes/blanktheme/ui/css/'))
});
// Watch
gulp.task('default', ['watch'], function() {
gulp.watch('./_themes/blanktheme/ui/scss/*.scss', ['styles']);
});
gulp.task('default', ['styles', 'watch']);
I think this come from the fact you have two tasks default. I guess gulp ignore the first one (with gulp.watch) to only trigger the second one. Then you have dependencies with watch but seems like watch does not exist ?
You can install gulp-watch locally, and include it in your file. Give a look at gulp-watch documentation it might help.
Try this :D
var watch = require('gulp-watch');
// Styles
gulp.task('styles', function() {
gulp.src('./_themes/blanktheme/ui/scss/styles.scss')
.pipe(include())
.pipe(sass({
errLogToConsole: true
}))
.pipe(minifycss())
.pipe(gulp.dest('./_themes/blanktheme/ui/css/'))
});
// Watch
gulp.task('watch', function() {
watch('./_themes/blanktheme/ui/scss/*.scss', function () {
gulp.start('styles');
});
});
gulp.task('default', ['styles', 'watch']);