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']);
Related
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.
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 beginner with Foundation and Sass. I understand slowly how it works. The workflow seems great, but here's my "issue".
When my SCSS is compiled, my CSS minifies as soon as I save my .scss file.
I've tried to turn off the Gulp task, but it didn't do anything.
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var sassPaths = [
'bower_components/normalize.scss/sass',
'bower_components/foundation-sites/scss',
'bower_components/motion-ui/src'
];
gulp.task('sass', function() {
return gulp.src('scss/*.scss')
.pipe($.sass({
includePaths: sassPaths,
// outputStyle: 'compressed'
})
.on('error', $.sass.logError))
.pipe($.autoprefixer({
browsers: ['last 2 versions', 'ie >= 9']
}))
.pipe(gulp.dest('css'));
});
gulp.task('default', ['sass'], function() {
gulp.watch(['scss/**/*.scss'], ['sass']);
});
Any ideas?
From looking at your task their shouldn't be any part of it that is minifying your css. A couple of things you could try:
1) Try outputStyle: 'expanded'
2) Try compiling your sass without including any of the bower sass files, as one of them could already be minified (although unlikely). Or even just check those manually.
3) Or finally try this configuration:
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var sassPaths = [
'bower_components/normalize.scss/sass',
'bower_components/foundation-sites/scss',
'bower_components/motion-ui/src',
'scss/*.scss'
];
gulp.task('sass', function() {
return gulp.src(sassPaths)
.pipe($.sass({
outputStyle: 'expanded'
})
.on('error', $.sass.logError))
.pipe($.autoprefixer({
browsers: ['last 2 versions', 'ie >= 9']
}))
.pipe(gulp.dest('css'));
});
gulp.task('default', ['sass'], function() {
gulp.watch(['scss/**/*.scss'], ['sass']);
});
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.
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']);