I'm using the latest versions of sass and compass and using gulp-compass to build. I'm getting .map sourcemap files even though I have set sourcemap=false in my config.rb file and have set the option sourcemap:false in the gulp-compass options. I would like to disable the sourcemaps at times in order to speed up the build. It takes roughly twice the time to run the gulp task when sourcemaps are generated. Any suggestions?
config.rb:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"
sourcemap = false
output_style = ":compact"
gulp.js:
gulp.task('compass', function() {
return gulp.src(['sass/screen.scss', 'sass/screen_fallback.scss']).pipe(compass({
config_file: 'config.rb',
css: 'css',
sass: 'sass',
sourcemap: false
})).on('error', function(err) {
notify({
message: err
})
}).pipe(notify({
message: 'Compass processed.'
})).pipe(minifycss()).pipe(rename({
suffix: '.min'
})).pipe(gulp.dest('css')).pipe(notify({
message: 'CSS minified.'
}));
});
You could try just running gulp-ruby-sass with the compass: true option. Here is your task changed to use gulp-ruby-sass:
gulp.task('compass', function() {
return gulp.src(['sass/screen.scss', 'sass/screen_fallback.scss']).pipe(rubysass({
'sourcemap=none': true,
compass: true
})).on('error', function(err) {
notify({
message: err
})
}).pipe(notify({
message: 'Compass processed.'
})).pipe(minifycss()).pipe(rename({
suffix: '.min'
})).pipe(gulp.dest('css')).pipe(notify({
message: 'CSS minified.'
}));
});
Related
I try to use sourcemaps for my scss files. But when I inspect an element in the browser, the sourcemap points to a wrong file. I can't find what is causing this issue.
gulp.task('sass', function(){
return gulp.src('./themes/custom/' + project + '/scss/style.scss')
.pipe(sourcemaps.init())
.pipe(sass({
includePaths: [
bourbon,
config.bowerDir + '/bootstrap-sass/assets/stylesheets',
config.bowerDir + '/font-awesome/scss'
],
style: 'compressed',
quiet: true,
}).on('error', function (err) {
sass.logError(err);
this.emit('end');
}))
.pipe(concat('style.css'))
.pipe(cleanCSS())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./themes/custom/' + project + '/css'))
});
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.
Source link - I don't know what is missing here
Everything fine if I am not including json file
1) gulpfile.js
var jsonSass = require('gulp-json-sass'),
gulp = require('gulp'),
concat = require('gulp-concat'),
sass = require('gulp-ruby-sass');
gulp.task('sass', function() {
return gulp
.src(['sass/example.json', 'sass/example.scss'])
.pipe(jsonSass({
sass: true
}))
.pipe(concat('output.scss'))
.pipe(sass())
.pipe(gulp.dest('out/'));
});
gulp.task('default', ['sass']);
2) example.json
{
"color": "blue"
}
3) example.scss file
.test{
color:$color;
}
4) error message
1. You want to output SCSS, not SASS. That means your sass option for gulp-json-sass is wrong. From the docs:
If truthy, output valid sass variables. If false, output scss variables.
2. You can't use gulp-ruby-sass in a pipe. From the docs:
Use gulp-ruby-sass instead of gulp.src to compile Sass files.
That means .pipe(sass()) won't work. You have to use gulp-sass instead of gulp-ruby-sass.
var jsonSass = require('gulp-json-sass'),
gulp = require('gulp'),
concat = require('gulp-concat'),
sass = require('gulp-sass');
gulp.task('sass', function() {
return gulp.src(['sass/example.json', 'sass/example.scss'])
.pipe(jsonSass({
sass: false
}))
.pipe(concat('output.scss'))
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('out/'));
});
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']);
I'm trying to escape liquid syntax with interpolate (#{' '}) but i'm getting this error:
[22:07:05] Starting 'scss'...
[22:07:05] Finished 'scss' after 9.77 ms
[22:07:05] [gulp-sass] stylesheets/main.css
527:10 Invalid CSS after " color: {": expected "}", was "ttings.color-te..."
When i remove all the liquid syntax from the code, the task runs perfectly. This is the scss task:
var gulp = require('gulp');
var watch = require('gulp-watch');
var sass = require('gulp-sass');
var cssnano = require('gulp-cssnano');
var rename = require("gulp-rename");
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('scss', function() {
gulp.src('stylesheets/*.scss')
.pipe(sass({ includePaths : ['./stylesheets/**/*.scss'] }))
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.init())
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(cssnano())
.pipe(rename({ suffix: '.min.css', extname: '.liquid' }))
.pipe(gulp.dest('./assets'));
});
gulp.task('watch', function() {
gulp.watch('stylesheets/**/*.scss', ['scss']);
});
If i remove this part >
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.init())
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(cssnano())
the task runs fine, but with problems to upload to shopify (Error invalid upload request! ) ... I`m using shopify-upload in another task too.
Remove 'autoprefixer' and/or 'cssnano'
You can't use gulp-saas to extrapolate liquid syntax, it will only parse sass files.
If you want to parse liquid files, you can use gulp-liquify before compiling you sass files.