Sass with .sass files,
Here is my gulpfile,
var gulp = require('gulp'),
sass = require('gulp-sass'),
connect = require('gulp-connect');
connect.server({port: 8000, livereload: true});
function exceptionLog (error) {
console.log(error.toString());
this.emit('end');
}
gulp.task('sass', function () {
gulp.src('sass/*.sass')
.pipe(sass({
outputStyle: 'expanded',
}))
.on('error', exceptionLog)
.pipe(gulp.dest('css'))
.on('error', exceptionLog)
.pipe(sass.sync().on('error', sass.logError));
});
gulp.task('reload', function () {
gulp.src('*.html')
.pipe(connect.reload())
.on('error', exceptionLog);
});
gulp.task('default', function() {
gulp.watch(['*.html'],['reload']);
gulp.watch('**/*.sass', ['sass','reload']);
});
This setup works well for .scss files, while now on this project, I have to stick with .sass, Gulp setup with this gulpfile does not breaks or display any errors (but compiles if no errors). but only the correct syntax will be compiled. while if change to .scss, it logs the errors.
You need to attach the error event listener to the sass stream, not your gulp stream or later in the stream when the error has already been thrown. Also, use the built in logError function to log errors:
.pipe(sass().on('error', sass.logError))
Full example:
gulp.task('sass', function () {
return gulp.src('sass/*.sass')
.pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
.pipe(gulp.dest('css'))
.on('error', exceptionLog);
}
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.
Gulp sass/gulp watch command is unable to override the already existing/generated .css file.
So when there is no generated css file in the folder, the command works fine. But, if the file exists on the folder I am getting below error.
[12:17:39] Error: EPERM: operation not permitted, open 'C:\My folder\project\components\site-products\demo\app\css\style.css'
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
return gulp.src('./demo/app/scss/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./demo/app/css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./demo/app/scss/**/*.scss', ['sass']);
});
Not sure its relevant but I am not using gulp-compass. I am using node-sass instead.
Thanks in advance for help.
Resolved it finally, it was because webpack was locking files.
Used gulp-chmod to bypass it :)
Here is the final script:
var gulp = require('gulp');
var sass = require('gulp-sass');
var chmod = require('gulp-chmod');
gulp.task('sass', function () {
return gulp.src('./demo/app/scss/**/*.scss')
.pipe(chmod(0o755))
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(gulp.dest('./dist/demo/css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./demo/app/scss/**/*.scss', ['sass']);
});
I got the same and resolved by using gulp cache control.
I don't understand why, but it works!
For you, it would be something like that:
var cache = require('gulp-cached');
gulp.task('cache:docsource', function(){
return gulp.src('./demo/app/**/*.*').pipe(cache('cacheDocSource'));
});
gulp.task('sass', function () {
return gulp.src('./demo/app/scss/**/*.scss')
.pipe(cache('cacheDocSource'))
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(gulp.dest('./dist/demo/css'));
});
gulp.task('sass:watch', ['cache:docsource'], function () {
gulp.watch('./demo/app/scss/**/*.scss', ['sass']);
});
You can use the clean task:
// Path
var paths = {
scss: {
input: 'dev/assets/scss/**/*.{scss,sass}',
output: 'public/assets/css'
}
};
// SCSS
gulp.task('scss', function() {
return sass(paths.scss.input)
.pipe(autoprefixer('last 2 version'))
.pipe(cssnano())
.pipe(gulp.dest(paths.scss.output))
.pipe(browserSync.reload({stream: true}));
});
// Clean
gulp.task('clean', function() {
return del(['public/**/*']);
});
// Default
gulp.task('default', ['clean'], function() {
gulp.start('scss');
});
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.
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']);