gulp browsersync sass partials - gulp

I have the following problem and don't know whats going wrong with my gulpfile. Everything is working fine and my sass files are being compiled and the browser refreshed when changing something.
But if I add a new partial file and import it into my _base.scss, browsersync is only recognizing the change in that partial and is not compiling the whole sass file & reloading the browser. Does anyone know how to solve this problem? I could not figure out a good solution.
Thanks!
Here's my gulpfile.js
/*=============================================>>>>>
= gulpfile - all the gulptasks are here =
===============================================>>>>>*/
/*----------- variables -----------*/
// gulp
var gulp = require('gulp');
// css stuff
var postcss = require('gulp-postcss');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var cssnext = require('postcss-cssnext');
var lost = require('lost');
var csswring = require('csswring');
// javascript
var babel = require('gulp-babel');
// jade
var jade = require('gulp-jade-php');
// browser sync
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
/*----------- tasks -----------*/
// style task
gulp.task('styles', function(){
var processors = [
autoprefixer,
cssnext,
lost,
csswring
];
return gulp.src('./scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(postcss(processors))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./css/'))
.pipe(reload({stream: true}));
;
});
// javascript task
gulp.task('javascript', function(){
return gulp.src('./js/*.js')
.pipe(babel())
.pipe(gulp.dest('./js/dist/'))
.pipe(reload({stream: true}));
});
// jade task
gulp.task('jade', function(){
return gulp.src('./jade/*.jade')
.pipe(jade())
.pipe(gulp.dest('./templates/'))
.pipe(reload({stream: true}));
});
// browser sync
gulp.task('browserSync', function(){
var files = [
'./scss/**/*.scss',
'./css/style.css',
'./*.php',
'./templates/**/*.php',
'./js/*js',
'./jade/*jade'
];
browserSync.init(
files, {
proxy : 'localhost:8888/jobs/heisaplan/',
});
});
// watching the files for changes
gulp.task('watch', function(){
gulp.watch('./scss/**/*.scss', ['styles']).on('change', browserSync.reload);
gulp.watch('./js/*.js', ['javascript']).on('change', browserSync.reload);
gulp.watch('./jade/**/*.jade', ['jade']).on('change', browserSync.reload);
gulp.watch('./templates/**/*.php').on('change', browserSync.reload);
gulp.watch('./*.php').on('change', browserSync.reload);
});
// default gulp task
gulp.task('default', ['watch', 'browserSync', 'styles', 'javascript', 'jade']);

Related

Gulp 4 browserSync reload

I'm having trouble with browserSync I can't get reload do trigger after trying several different methods. BrowserSync itself is up and running although when I manually reload nothing happens I have to open a new tab to see any changes. I'm not really understanding gulp 4 and all the sources I have watched seem to be using completely different methods to me. Any help would be greatly appreciated feel free to ask any questions.
var gulp = require('gulp');
var sass = require('gulp-sass');
var concatcss = require('gulp-concat');
var concatjs = require('gulp-concat');
var uglifycss = require('gulp-uglifycss');
var reload = require('browser-sync').reload();
var nunjucks = require('gulp-nunjucks-render');
var browserSync = require('browser-sync').create();
sass.compiler = require('node-sass');
gulp.task('sass', function () {
return gulp.src('./Edit/sass/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./Edit/css'));
});
gulp.task('concatcss', function() {
return gulp.src('./Edit/css/*.css')
.pipe(concatcss('style.css'))
.pipe(gulp.dest('./Edit/css/concated/'));
});
gulp.task('concatjs', function() {
return gulp.src('./Edit/java-script/*.js')
.pipe(concatjs('scripts.js'))
.pipe(gulp.dest('./Upload/js/'));
});
gulp.task('css', function () {
return gulp.src('./Edit/css/concated/*.css')
.pipe(uglifycss({
"maxLineLen": 80,
"uglyComments": true
}))
.pipe(gulp.dest('./upload/css'));
});
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: "./Upload/"
}
});
});
gulp.task('run',gulp.parallel('browserSync', gulp.series('sass','concatcss','concatjs','css')));
gulp.task('watch', function(){
gulp.watch('./Edit/sass/*.scss',gulp.series('sass'));
gulp.watch('./Edit/css/*.css',gulp.series('concatcss'));
gulp.watch('./Edit/java-script/*.js',gulp.series('concatjs')); // maybe put extra task in all gulp series for browser sync
gulp.watch('./Edit/css/concated/*.css', gulp.series('css'));
});
gulp.task('default', gulp.parallel('watch', 'run'));
For anyone else having trouble here is my solution, simply add this .on('change', browserSync.relod) to the end of the desired watch.
gulp.task('watch', function(){
gulp.watch('./Edit/sass/*.scss',gulp.series('sass'));
gulp.watch('./Edit/css/*.css',gulp.series('concatcss'));
gulp.watch('./Edit/java-script/*.js',gulp.series('concatjs')); // maybe put extra task in all gulp series for browser sync
gulp.watch('./Edit/css/concated/*.css', gulp.series('css'));
gulp.watch('./Upload/css/*.css').on('change', browserSync.reload);
gulp.watch('./Upload/js/*.js').on('change', browserSync.reload);
});

Gulp css styles are not updated

I have problem. Yestrday I had to update the Node.js kernel and now that I change something in the LESS file, there will be no css update. Gulpfile is the same as before the update. Could someone advise me what's wrong with my gulpfile script?
The HTML file update is OK.
//*********** IMPORTS *****************
var gulp = require('gulp'),
browserSync = require('browser-sync');
var postcss = require('gulp-postcss');
var less = require('gulp-less');
var watch = require('gulp-watch');
var livereload = require('gulp-livereload');
var autoprefixer = require('gulp-autoprefixer');
var concat = require('gulp-concat-css');
var cssmin = require('gulp-cssmin');
/* BROWSERSYNC */
gulp.task('browserSync', function () {
var files = ['orient-spa/**'];
browserSync.init(files, {
server: {
baseDir: 'orient-spa/',
index: 'index.html'
},
logPrefix: 'OS01',
browser: ['chrome']
});
});
gulp.task('css', function () {
var processors = [
autoprefixer
];
return gulp.src('./orient-spa/skins/less/index-files.less')
.pipe(less())
.pipe(postcss(processors))
.pipe(gulp.dest('./orient-spa/skins/css/'))
.pipe(livereload());
});
gulp.task('watch', function() {
livereload.listen();
gulp.watch('./orient-spa/skins/less/*.less', ['css']);
gulp.watch('./orient-spa/skins/css/*.css', ['concatMinify']);
});
gulp.task('concatMinify', function () {
return gulp.src('./orient-spa/skins/css/*.css')
.pipe(concat("index.css"))
.pipe(cssmin())
.pipe(gulp.dest('./orient-spa/skins/css/compiled'))
.pipe(livereload());
});
gulp.task('default', ['browserSync', 'watch', 'css', 'concatMinify']);
Thanks for your advice :-)
I try this path, but problem remains.
Last version node.js was Node.js 7.2.1 (Node.js), now Node.js 9.8.0.
I attach an image to the console after changing 1 line in the LESS file.
Here I see that the set of commands does not call correctly. Or they are called repeatedly. Do not you see a mistake here, please?
Thanks for your advice

gulp-sass with browsersync inject not working

// variable
// -----------------------------------------------------------------------------
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
// task
// -----------------------------------------------------------------------------
gulp.task('styles', function() {
return gulp.src([
'./src/assets/styles/*.scss'
], {
base: './src/assets/styles/'
})
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./dist/assets/styles/'))
.pipe(browserSync.stream());
});
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: './dist/'
}
});
gulp.watch('./dist/*.html').on('change', browserSync.reload);
gulp.watch('./src/assets/styles/**/*.scss', ['styles']);
gulp.watch('./dist/assets/scripts/*.js').on('change', browserSync.reload);
});
How can make above code working? The scripts and html part working, but scss part not, when scss file change, styles task has start and finish with no error, the html file has body tag, but the browser do not inject the new css file.
Check this example, it may help you with a few tweaks in paths:
/**
* This example:
* Uses the built-in BrowserSync server for HTML files
* Watches & compiles SASS files
* Watches & injects CSS files
*/
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var gulp = require('gulp');
var sass = require('gulp-sass');
var filter = require('gulp-filter');
// Browser-sync task, only cares about compiled CSS
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "./"
}
});
});
// Sass task, will run when any SCSS files change.
gulp.task('sass', function () {
return gulp.src('scss/styles.scss')
.pipe(sass({includePaths: ['scss']})) // compile sass
.pipe(gulp.dest('css')) // write to css dir
.pipe(filter('**/*.css')) // filter the stream to ensure only CSS files passed.
.pipe(reload({stream:true})); // inject into browsers
});
// Default task to be run with `gulp`
gulp.task('default', ['sass', 'browser-sync'], function () {
gulp.watch("scss/*.scss", ['sass']);
});

Gulp browsersync gets stuck reloading browser

I am trying to streamline my workflow and include templating. I installed Nunjucks and tried to set it up so whenever I save a change to a template file gulp watch will fire the nunjucks function and refresh my browser.(firefoxdeveloperedition)
It works at first, but then my browser stops reloading the changes. Every time I save the browser will refresh but the changes do not appear. Here is my gulpfile(i removed the other tasks from this but keep the requirements in so you can see the modules i have installed)
/* Module Requirements */
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var useref = require('gulp-useref');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var imagemin = require('gulp-imagemin');
var nunjucksRender = require('gulp-nunjucks-render');
/* //Module Requirements */
//Compile sass into css
gulp.task('sass', function(){
return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss and children dirs
.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('nunjucks', function() {
// Gets .html and .nunjucks files in pages
return gulp.src('app/pages/**/*.+(html|nunjucks)')
// Renders template with nunjucks
.pipe(nunjucksRender({
path: ['app/templates']
}))
// output files in app folder
.pipe(gulp.dest('app'))
});
//Watch for changes in sass and html and update browser.
gulp.task('watch', ['browserSync', 'sass', 'nunjucks'], function (){
gulp.watch('app/scss/**/*.scss', ['sass']);
gulp.watch('app/templates/**/*.+(html|nunjucks)', ['nunjucks']);
gulp.watch('app/*.html', browserSync.reload);
gulp.watch('app/js/**/*.js', browserSync.reload);
// Other watchers
});
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: 'app'
},
browser: ['firefoxdeveloperedition']
})
})
Is my code wrong?
EDIT: After some more testing it actually seems to be tied to Firefox Developer Edition...

Gulp watch doesn't not compile my .scss at each modification

I encounter a problem with Gulp, I can not compile my .scss at each modification. When I run "gulp watch" and make changes in my css, nothing happens.
gulp css works, gulp watch doesn't work.
Yet everything looks good.
Do you have an idea ?
Thanks !
// Requires
var gulp = require('gulp');
// Include plugins
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var minifycss = require('gulp-minify-css');
// var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
// tâche CSS = compile vers knacss.css et knacss-unminified.css
gulp.task('css', function () {
return gulp.src('./src/assets/css/style.scss')
.pipe(sass())
.pipe(autoprefixer())
.pipe(rename('knacss.css'))
.pipe(gulp.dest('./dist/assets/css/'))
.pipe(rename('style.css'))
//.pipe(sourcemaps.init())
.pipe(minifycss())
//.pipe(sourcemaps.write('.', {includeContent: false}))
.pipe(gulp.dest('./dist/assets/css/'));
});
// Watcher
gulp.task('watch', function() {
gulp.watch(['./src/assets/css/*.scss'], ['css']);
});
gulp.task('default', ['css']);
Gulp watch doesn't not compile my .scss at each modification
That's because you don't tell it to.
You are only watching *.scss files in ./src/assets/css, not in subfolders.
To include subfolders, use this syntax:
gulp.task('watch', function() {
gulp.watch(['./src/assets/css/**/*.scss'], ['css']);
});
try with something like.
//SASS task
gulp.task('sass', function () {
var sassPath = {
cssSrc: ['./src/assets/css/*.scss'], cssDest: './src/assets/css/'
};
gulp.src(sassPath.cssSrc)
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(sassPath.cssDest))
.pipe(livereload());
});
and then in your watch:
// Watcher
gulp.task('watch', function() {
gulp.watch(['./src/assets/css/*.scss'], ['sass']);
});
and:
gulp.task('default', ['sass','css']);