Browsersync stream is not working for me.
I've copied example from official documentation and it won't working. Reloading for html and js files working fine. Only sass streaming wouldn't work. I've read all the issues on github and can't find an answer for my question.
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
// -----------------
gulp.task('serve', ['sass'], function() {
browserSync.init({
server: {
baseDir: "./app",
index: 'index.html'
}
});
gulp.watch('app/styles/*.scss', ['sass']);
gulp.watch("app/*.html").on('change', browserSync.reload);
gulp.watch('app/pages/*.html').on('change', browserSync.reload);
gulp.watch('app/js/**/*.js').on('change', browserSync.reload);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
return gulp.src('app/styles/*.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.stream());
})
// Build Sequences
// ---------------
gulp.task('default', function(callback) {
runSequence([
'sass', 'serve'
], callback)
})
gulp.task('build', function(callback) {
runSequence('clean:dist', 'sass', [
'useref', 'images', 'fonts'
], callback)
})
I would make three quick changes to see if they help. First
const browserSync = require("browser-sync").create();
Note the create() at the end, you need that. Second, simplify this:
gulp.task('default', function(callback) {
runSequence([
'sass', 'serve'
], callback)
})
to:
gulp.task('default', ['serve']);
Your 'serve' task calls the 'sass' task first anyway so you don't need the renSequence stuff. Finally, change:
pipe(browserSync.stream());
to:
pipe(browserSync.reload({stream:true}));
I would also make this change:
gulp.watch('app/js/**/*.js').on('change', browserSync.reload(stream:true}));
Related
Can I get some insight on why I'm getting this message in chrome console, it seems to prevent css code injection.
Browsersync reloading all stylesheets because path
'html\css\theme.css' did not match any specific one.
I suspect it's a path issue i have, but I can't seem to figure it out.
I tried to strip as much as I could.
Here's my folder structure:
/_base/gulpfile.js
/_base/html/index.html
/_base/html/css/theme.css
/_base/src/scss/theme.scss
And here's my code:
// Defining requirements
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var browserSync = require('browser-sync').create();
var sourcemaps = require('gulp-sourcemaps');
var notify = require('gulp-notify');
// var style lint
//general error handler with plumber
var pb_errorHandler = { errorHandler: notify.onError({
title: 'Gulp',
message: 'Error: <%= error.message %>'
})
};
// stage 1 - HTML CSS JS FILE CREATION
// A. scss to css
var s1_sassOptions = {
errLogToConsole: true,
outputStyle: 'expanded'
};
// compile stage1 scss files, use plumber and sorcemaps.
// to do : need to check what error handling to use - curently 2
gulp.task('create-css', function () {
gulp.src('src/scss/theme.scss')
.pipe(plumber(pb_errorHandler))
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sass(s1_sassOptions).on('error', sass.logError))
.pipe(sourcemaps.write(undefined, { sourceRoot: null }))
.pipe(gulp.dest('html/css/'))
});
// automatically reloads the page when files coressponding to this paths are changed:
var s1_broswserSync_files = [
'html/css/*.css'
];
// browsersync options
var s1_browserSync_options = {
server:"./html"
};
gulp.task('browser-sync', function() {
browserSync.init(s1_broswserSync_files, s1_browserSync_options );
});
// Starts watcher. Watcher runs gulp sass task on changes
gulp.task('stage1-watch', function () {
gulp.watch(['src/scss/*.scss'], ['create-css']);
});
// Starts watcher with browser-sync. Browser-sync reloads page automatically on your browser
gulp.task('stage1', ['browser-sync', 'stage1-watch'], function () { });
It looks like your options for browserSync.init() aren't correct. The init method takes two optional arguments of configuration options and a callback function. See https://browsersync.io/docs/api#api-init
You want to setup your options like this.
var s1_browserSync_options = {
server:"./html",
files: "html/css/*.css"
};
gulp.task('browser-sync', function() {
browserSync.init(s1_browserSync_options );
});
Take a look at the SASS and CSS injecting in the docs https://browsersync.io/docs/gulp#gulp-reload
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']);
Normally Gulp-Sass compiles Sass to CSS perfectly until there is an error in a Sass file(for eg: h1{font-size:}).
I have used Gulp Plumber to prevent the pipes from breaking but I could not figure out the way to properly use it. In the above example, even if I fix the error and make it h1{font-size:32px;}, CSS is not generated.
ERROR
Plumber found unhandled error:
error in plugin 'gulp-sass'
Message:
app\scss\pages\_landing.scss
Error: style declaration must contain a value
...
gulpfile
// Requires Gulp
var gulp = require('gulp');
// Require Gulp Sass
var sass = require('gulp-sass');
// Require Browser Sync
var browserSync = require('browser-sync').create();
// For minificatin
var useref = require('gulp-useref');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var cssnano = require('gulp-cssnano');
// Require imagemin
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
// Require del
var del = require('del');
// Require runsequence
var runSequence = require('run-sequence');
// Require Sourcemaps
var sourcemaps = require('gulp-sourcemaps');
// Require Plumber
var plumber = require('gulp-plumber');
// Prepocessing Sass
gulp.task('sass', function(){
return gulp.src('app/scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(plumber({
handleError: function (err) {
console.log(err);
this.emit('end');
}
}))
.pipe(sass()) // Using gulp-sass
.pipe(sourcemaps.write())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({
stream: true
}))
});
// Spinning up a Browser Sync Server
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: 'app'
},
})
})
// Watching for changes
gulp.task('watch', ['sass', 'browserSync'], function(){
gulp.watch('app/scss/**/*.scss', ['sass']);
gulp.watch('app/*.html', browserSync.reload);
})
// Gulp Default Function
gulp.task('default', function (callback) {
runSequence(['sass','browserSync', 'watch'],
callback
)
})
// Minification
gulp.task('useref', function(){
return gulp.src('app/*.html')
.pipe(useref())
// Minifies only if it's a JavaScript file
.pipe(gulpIf('*.js', uglify()))
// Minifies only if it's a CSS file
.pipe(gulpIf('*.css', cssnano()))
.pipe(gulp.dest('dist'))
});
// Image Optimization
gulp.task('images', function(){
return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg|JPG)')
// Caching images that ran through imagemin
.pipe(cache(imagemin({
interlaced: true
})))
.pipe(gulp.dest('dist/images'))
});
// Copy Fonts
gulp.task('fonts', function() {
return gulp.src('app/fonts/**/*')
.pipe(gulp.dest('dist/fonts'))
})
// Cleaning up generated files
gulp.task('clean:dist', function() {
return del.sync('dist');
})
// Build Production website
gulp.task('build', function(callback) {
runSequence(
'clean:dist',
'sass',
['useref', 'images', 'fonts'],
callback
)
})
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']);