I have a problem with gulp watch task.
To be precise, it doesn't work with .scss partials which I add. It starts to work only when I run the task again.
There's my gulpfile:
const gulp = require('gulp'),
plugins = require('gulp-load-plugins')({
lazy: true,
}),
browserSync = require('browser-sync'),
webpack = require('webpack'),
webpackStream = require('webpack-stream'),
webpackConfig = require('./webpack.config.js');
gulp.task('css', function () {
return gulp.src('src/sass/main.scss')
.pipe(plugins.plumber())
.pipe(plugins.sass({
includePaths: ['./node_modules'],
}))
.on('error', plugins.sass.logError)
.pipe(plugins.autoprefixer('last 4 versions'))
.pipe(plugins.combineMq({
beautify: false
}))
.pipe(gulp.dest('src/assets/css'))
.pipe(browserSync.stream());
});
gulp.task('js', () => {
gulp.src('src/assets/js/main.js')
.pipe(webpackStream(webpackConfig), webpack)
.pipe(gulp.dest('js'));
});
gulp.task("server", function () {
browserSync.init({
proxy: "http://wp-boilerplate.test"
});
});
gulp.task("watch", function () {
gulp.watch('src/sass/**/*.scss', ["css"]);
gulp.watch(["*.php", "src/assets/js/*.js"], browserSync.reload);
});
gulp.task("default", ["css", "server", "watch"]);
I've read some other posts about it but I haven't found working solution.
I'd appreciate if someone could help me with it.
Related
I'm new to Gulp,
this Gulp setting is already rendered 'main.scss' but I want to add 1 more scss file named 'styles.scss' into this Gulp but kinda stuck.
How can I insert this new scss ?
should I create a new task for new scss? well, I did but it seems that I'm doing it the wrong way.
how to add it in the correct way?
<pre><code>
"use strict";
var gulp = require('gulp'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
sass = require('gulp-sass'),
maps = require('gulp-sourcemaps'),
del = require('del'),
autoprefixer = require('gulp-autoprefixer'),
browserSync = require('browser-sync').create(),
htmlreplace = require('gulp-html-replace'),
cssmin = require('gulp-cssmin');
gulp.task("concatScripts", function() {
return gulp.src([
'assets/js/vendor/jquery-3.2.1.slim.min.js',
'assets/js/vendor/popper.min.js',
'assets/js/vendor/bootstrap.min.js',
'assets/js/functions.js'
])
.pipe(maps.init())
.pipe(concat('main.js'))
.pipe(maps.write('./'))
.pipe(gulp.dest('assets/js'))
.pipe(browserSync.stream());
});
gulp.task("minifyScripts", ["concatScripts"], function() {
return gulp.src("assets/js/main.js")
.pipe(uglify())
.pipe(rename('main.min.js'))
.pipe(gulp.dest('dist/assets/js'));
});
gulp.task('compileSass', function() {
return gulp.src("assets/css/main.scss")
.pipe(maps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer())
.pipe(maps.write('./'))
.pipe(gulp.dest('assets/css'))
.pipe(browserSync.stream());
});
gulp.task("minifyCss", ["compileSass"], function() {
return gulp.src("assets/css/main.css")
.pipe(cssmin())
.pipe(rename('main.min.css'))
.pipe(gulp.dest('dist/assets/css'));
});
gulp.task('watchFiles', function() {
gulp.watch('assets/css/**/*.scss', ['compileSass']);
gulp.watch('assets/js/*.js', ['concatScripts']);
})
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./"
}
});
});
gulp.task('clean', function() {
del(['dist', 'assets/css/main.css*', 'assets/js/main*.js*']);
});
gulp.task('renameSources', function() {
return gulp.src(['*.html', '*.php'])
.pipe(htmlreplace({
'js': 'assets/js/main.min.js',
'css': 'assets/css/main.min.css'
}))
.pipe(gulp.dest('dist/'));
});
gulp.task("build", ['minifyScripts', 'minifyCss'], function() {
return gulp.src(['*.html', '*.php', 'favicon.ico',
"assets/img/**", "assets/fonts/**"], { base: './'})
.pipe(gulp.dest('dist'));
});
gulp.task('serve', ['watchFiles'], function(){
browserSync.init({
server: "./"
});
gulp.watch("assets/css/**/*.scss", ['watchFiles']);
gulp.watch(['*.html', '*.php']).on('change', browserSync.reload);
});
gulp.task("default", ["clean", 'build'], function() {
gulp.start('renameSources');
});
</code></pre>
Any help really appreciated. Thanks
Assuming styles.scss is in the same folder as main.scss:
gulp.task('compileSass', function() {
// src changed so that all .scss files in folder are used
return gulp.src("assets/css/*.scss")
.pipe(maps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer())
.pipe(maps.write('./'))
.pipe(gulp.dest('assets/css'))
.pipe(browserSync.stream());
});
gulp.task("minifyCss", ["compileSass"], function() {
// same as above : gulp.src takes a glob of all .css files in css folder
return gulp.src("assets/css/*.css")
.pipe(cssmin())
// name each file with the suffix, rest of name will be same as before
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('dist/assets/css'));
});
gulp.task('clean', function() {
// changed css item so all .css files are deleted
del(['dist', 'assets/css/*.css*', 'assets/js/main*.js*']);
});
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'm trying to make Gulp compile my sass files. It sees changes in main.sass file but if I #import files it doesn't see changes in them unless I restart gulp.
Here is my gulpfile
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
browserSync = require('browser-sync').create(),
jade = require('gulp-jade');
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir:'./'
}
});
});
// Compiling SASS to CSS
gulp.task('styles', function () {
return sass('assets/sass/main.sass')
.on('error', sass.logError)
.pipe(autoprefixer({
browsers: ['last 3 versions','> 5%'],
cascade: false
}))
.pipe(gulp.dest('assets/css/'))
.pipe(browserSync.stream());
});
//HTML
gulp.task('templates', function() {
var YOUR_LOCALS = {};
gulp.src('./*.jade')
.pipe(jade({
locals: YOUR_LOCALS,
pretty: true
}))
.pipe(gulp.dest('./'))
});
//Default task
gulp.task('default', ['styles', 'watch', 'browser-sync', 'templates']);
gulp.task('watch', function(){
gulp.watch('*.html').on('change', browserSync.reload);
gulp.watch('*.jade').on('change', browserSync.reload);
gulp.watch('*.css').on('change', browserSync.reload);
gulp.watch('assets/sass/main.sass', ['styles']);
gulp.watch('*.jade', ['templates']);
})
And these is the structure of my project
You're only watching for changes to assets/sass/main.sass. You need to watch for changes to any .sass file below assets/sass:
gulp.watch('assets/sass/**/*.sass', ['styles']);
Instead of:
gulp.watch('assets/sass/main.sass', ['styles']);
See below. The problem I'm having with my current code is that Sourcemaps aren't getting injected via Browsersync. Am I missing something here or doing it the wrong way?
For reference:
https://www.browsersync.io/docs/gulp/#gulp-sass-maps
// requirements
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var browserSync = require('browser-sync').create();
var prefix = require('gulp-autoprefixer');
var rename = require('gulp-rename');
var sourcemaps = require('gulp-sourcemaps');
var cssclean = require('gulp-clean-css');
// create sass tasks
gulp.task('sass', function() {
return sass('assets/scss/style.scss', {sourcemap: true, style: 'compact'})
.on('error', function (err) {
console.error('Error!', err.message);
})
.pipe(rename({suffix: '.min'}))
.pipe(cssclean())
.pipe(prefix("last 2 versions", "> 1%", "ie 8", "Android 2", "Firefox ESR"))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('assets/styles'))
.pipe(browserSync.stream({match: '**/*.css'}))
});
gulp.task('serve', ['sass'], function() {
browserSync.init({
proxy: "localhost/portfolio2014",
open:false
});
gulp.watch("assets/scss/**/*.scss", ['sass']);
gulp.watch(["assets/styles/*.css", "site/**/*", "content/**/*", "assets/javascript/*.js"]).on('change', browserSync.reload);
});
// default task (just run gulp)
gulp.task('default', ['serve'] );
Do you have to use gulp-ruby-sass? The gulpfile.js below is adding sourcemaps with gulp-sass and updating the browser when saving .scss files with sourcemaps.
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var prefix = require('gulp-autoprefixer');
var rename = require('gulp-rename');
var sourcemaps = require('gulp-sourcemaps');
var cssclean = require('gulp-clean-css');
// create sass tasks
gulp.task('sass', function () {
return gulp.src('assets/scss/test.scss')
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(rename({ suffix: '.min' }))
.pipe(cssclean())
.pipe(prefix("last 2 versions", "> 1%", "ie 8", "Android 2", "Firefox ESR"))
.pipe(sourcemaps.write(''))
.pipe(gulp.dest('assets/styles'))
.pipe(browserSync.stream({ match: '**/*.css' }))
.on('error', function (err) {
console.error('Error!', err.message);
});
});
gulp.task('serve', ['sass'], function () {
browserSync.init({
proxy: "localhost/portfolio2014",
open: false
});
gulp.watch("assets/scss/**/*.scss", ['sass']);
gulp.watch(["assets/styles/*.css", "assets/javascript/*.js"]).on('change', browserSync.reload);
});
// default task (just run gulp)
gulp.task('default', ['serve']);
I use gulp and growl. I create this gulpfile.js:
var gulp = require("gulp");
var less = require("gulp-less");
var notifier = require('node-notifier');
var notify = require("gulp-notify");
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
gulp.task('less', function() {
var trete;
console.log(trete);
gulp.src('css/main.less')
.pipe(less())
.on('error', function(err){
trete = err.message;
notifier.notify({
'title': 'My notification',
'message': trete
});
return false;
})
.pipe(notify("Всё заебись!"))
.pipe(gulp.dest('css/'))
});
gulp.task('bs-reload', function () {
browserSync.reload();
});
gulp.task('browser-sync', function() {
browserSync.init(['css/*.css', 'js/*.js'], {
server: {
baseDir: './'
}
});
});
gulp.task('watch', function() {
gulp.watch('css/**', ['less']);
gulp.run('less');
gulp.watch(['*.html'], ['bs-reload']);
});
gulp.task('default', ['less', 'browser-sync', 'watch']);
When I run gulp, growl shows two notification and browser-sync twice reload page. Maybe I do something wrong?
You run 'less' twice in the 'default' task. Its the first dependent task, will run, then it runs again in the 'watch' task because of gulp.run.
Remove gulp.run in 'watch' task.
Add 'less' as dependent task for 'watch' task instead.
You probably want to stream your styles instead of full page reload so pipe less through this at the end.
.pipe(gulp.dest(cssPath))
.pipe(browserSync.stream());
Your task do not return their streams, they will never finish due to that. Tasks should always return a stream or take in a done-callback and call that if they are async.
var gulp = require("gulp");
var less = require("gulp-less");
var notifier = require('node-notifier');
var notify = require("gulp-notify");
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
gulp.task('less', function() {
return gulp.src('css/main.less')
.pipe(less())
.on('error', function(err){
notifier.notify({
'title': 'My notification',
'message': err.message
});
return false;
})
.pipe(notify("Всё заебись!"))
.pipe(gulp.dest('css/'))
.pipe(browserSync.stream());
});
gulp.task('browser-sync', ['less'], function() {
browserSync.init({
server: {
baseDir: './'
}
});
});
gulp.task('watch', ['less'], function() {
gulp.watch('css/**', 'less');
gulp.watch('*.html').on('change', reload);
});
gulp.task('default', ['browser-sync', 'watch']);