I can't seem to get my sourcemaps up and working correctly with gulp-ruby-sass. They generate, and I can see the comment at the end of my css file, but Chrome doesn't read them despite options being enabled in the settings.
Thanks for any help,
var gulp = require('gulp');
var gutil = require('gulp-util');
var sass = require('gulp-ruby-sass');
gulp.task('sass', function(){
gulp.src('./assets/scss/main.scss')
.pipe(sass({noCache: true, sourcemapPath: '../scss'}))
.on('error', function(err){console.log(err.message);})
.pipe(gulp.dest('./assets/css/'));
});
gulp.task('watch',function(){
gulp.watch('./assets/**/*.scss', ['sass']);
});
gulp.task('default', ['sass','watch']);
Refering to the API doc
You need to make sure you have Sass v3.4.0 or newer
You need to add sourcemap: true or any other valid value (auto, file, inline)
You need to provide a sourcemapPath, which you already have
gulp.task('sass', function(){
gulp.src('./assets/scss/main.scss')
.pipe(sass({
noCache: true,
sourcemapPath: '../scss',
sourcemap: true
}))
.on('error', function(err){console.log(err.message);})
.pipe(gulp.dest('./assets/css/'));
});
Related
I've come from Grunt to Gulp. Good so far but i can't seem to get the Sass errors to show on the site. Curently it stops the whole gulp task and i only get an error in Terminal
With Grunt the errors appreared immediately on the local site in a css content property. I liked this much better, much easier to use. Any ideas? Thanks.
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
gulp.task('serve', ['sass'], function() {
browserSync.init({
proxy:"dummy.com"
});
gulp.watch("craft/web/sass/*.scss", ['sass']);
gulp.watch("craft/templates/*.html").on('change', browserSync.reload);
});
gulp.task('sass', function() {
return gulp.src("craft/web/sass/*.scss")
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest("craft/web/css"))
.pipe(browserSync.stream());
});
gulp.task('default', ['serve']);
When I use the following code in my .scss file
#import url('//fonts.googleapis.com/css?family=SomeFont:400,700,400italic');
the SASS parser I use (nodejs gulp-sass) happily downloads the file from said location and includes it as plain text in the compiled output.
Here's my Gulpfile:
var gulp = require('gulp'),
sourcemaps = require('gulp-sourcemaps'),
autoprefixer = require('gulp-autoprefixer'),
minify = require('gulp-minify-css'),
rename = require('gulp-rename'),
sass = require('gulp-sass'),
uglify = require('gulp-uglify'),
plumber = require('gulp-plumber');
gulp.task('sass', function() {
gulp.src('www/sass/*.scss')
.pipe(plumber(function(err){
console.log(err);
this.emit('end');
}))
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'expanded',
errLogToConsole: true,
}))
.pipe(autoprefixer('last 2 version'))
.pipe(rename({suffix: '.min' }))
.pipe(minify())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('www/css'));
});
Problem is, my site uses HTTPS, and when the file is requested by the compiler, it fetches the file using HTTP and as such the URLs in the returned response are also HTTP which results in loads of warnings filling up the console, while the fonts would not load.
Is there any way I could tell the compiler to leave that line alone?
The issue was not with gulp-sass itself, but with gulp-minify-css that did the compression of the rendered CSS files. The solution is to pass {processImport: false} to minify:
gulp.task('sass', function() {
gulp.src('www/sass/*.scss')
.pipe(plumber(function(err){
console.log(err);
this.emit('end');
}))
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'expanded',
errLogToConsole: true,
}))
.pipe(autoprefixer('last 2 version'))
.pipe(rename({suffix: '.min' }))
// Here
.pipe(minify({processImport: false}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('www/css'));
});
Protocol relative URLs are now discouraged. I would suggest setting the URL to HTTPS and leaving it that way.
This is the first time I use a Taskrunner but I've used Sass a lot and I really like the Sass syntax rather than the SCSS syntax. However, I want to use the Bourbon library in my new project and it's written with SCSS, so it doesn't compile for me if I don't have all of my CSS written in SCSS, since I only compile the files with the .sass ending. Is there a way to compile both or to use some other gulp plugin that does this? I've never had this problem using Compass, Codekit or the Sass compiler that's built into Jekyll. I attached my code and remember that I'm new to this, so feel free to point out if I've done some stupid decisions or if there's something that looks weird, I'd love to improve.
var gulp = require('gulp'),
browserify = require('gulp-browserify'),
sass = require('gulp-sass'),
browserSync = require('browser-sync'),
reload = browserSync.reload;
//Tasks regarding scripts--------------------------------------------------|
gulp.task('scripts', function(){
// Single entry point to browserify
gulp.src('vendor/scripts/main.js')
.pipe(browserify({
insertGlobals : true,
debug : !gulp.env.production
}))
.pipe(gulp.dest('./dist/js'))
console.log("This is reloaded");
});
//Tasks regarding styles----------------------------------------------------|
gulp.task('sass', function(){
gulp.src('vendor/styles/**/*.scss')
.pipe(sass({
outputStyle: 'nested',
onError: console.error.bind(console, 'Sass error:')
}))
.pipe(gulp.dest('./dist/css'))
});
//Live reload--------------------------------------------------------------------|
gulp.task('serve', ['scripts','sass'], function () {
gulp.watch([
'dist/**/*'
]).on('change', reload);
gulp.watch('vendor/styles/**/*.scss', ['sass']);
gulp.watch('vendor/scripts/*.js', ['scripts']);
browserSync({
notify: false,
port: 9000,
server: {
baseDir: ['.tmp', 'dist'],
routes: {
'/bower_components': 'bower_components'
}
}
});
});
gulp-sass is based on libsass, the native C implementation of Sass, and libsass is well known to have issues with different syntaxes. I'd recommend using the plugin gulp-ruby-sass to fall back on the original Ruby implementation. The one you also use with Codekit, Compass, and so on. Be aware that gulp-ruby-sass has a different interface:
var sass = require('gulp-ruby-sass');
gulp.task('sass', function(){
return sass('vendor/styles/**/*.scss')
.pipe(gulp.dest('./dist/css'))
});
It's a lot slower that gulp-sass, but you won't come into such issues since there's still a huge difference between those implementations.
Btw: Good turn on your first Gulpfile! Just make sure to return streams in your subtasks so Gulp knows how to orchestrate them (just place a return statement before gulp.src)
According to
https://css-tricks.com/gulp-for-beginners/
You just need to change
/*.scss to *.+(scss|sass)
The plus + and parentheses () allows Gulp to match multiple patterns, with different patterns separated by the pipe | character. In this case, Gulp will match any file ending with .scss or .sass in the root folder.
This are my plugins:
// Load plugins
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
cssnano = require('gulp-cssnano'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
haml = require('gulp-ruby-haml'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload'),
coffee = require('gulp-coffee'),
gutil = require('gulp-util'),
slim = require("gulp-slim"),
del = require('del');
This worked for me:
// Styles
gulp.task('styles', function() {
return sass('src/styles/**/*.+(scss|sass)', { style: 'expanded' })
.pipe(autoprefixer('last 2 version'))
.pipe(gulp.dest('dist/css'))
.pipe(rename({ suffix: '.min' }))
.pipe(cssnano())
.pipe(gulp.dest('dist/css'));
});
I have set up a gulp-ruby-sass task in gulp, with some options.
Options 'precision' and 'style' work as expected, but I get no debugInfo or lineNumbers in the css (I do get them with compass).
My gulpfile.js:
var gulp = require('gulp'),
sass = require('gulp-ruby-sass');
function errorLog(error)
{
console.log(error.toString());
this.emit('end');
}
// SASS
gulp.task('styles', function(){
gulp.src('scss/**/*.scss')
.pipe(sass({
debugInfo : true,
lineNumbers : true,
precision : 6,
style : 'normal'
}))
.on('error', errorLog)
.pipe(gulp.dest('css/'));
});
What am I doing wrong?
I was able to figure this out. The solution was two-fold for me. If I added the lineNumbers option, it would fail with a file not found error. This is probably because I am compiling both normal css (with line numbers) along with a minified version.
I needed to add the "container" option in order for it to work correctly.
Here's what my working gulp tasks look like:
gulp.task('styles', function()
{
return sass('app/assets/sass/app.scss', { style: 'expanded', lineNumbers: true, container: 'gulp-ruby-sass' })
.pipe(autoprefixer('last 15 version'))
.pipe(gulp.dest('public/css'));
});
gulp.task('styles-min', function()
{
return sass('app/assets/sass/app.scss', { style: 'expanded', container: 'gulp-ruby-sass-min' })
.pipe(autoprefixer('last 15 version'))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(gulp.dest('public/css'));
});
NOTE: The lineNumbers option is somewhat misleading because it's actually the path to the source sass/scss file AND the line number.
Everything is almost working, compass is compiling the CSS and a few other tasks are running to minify, rename, rev etc. The problem is that when a style change occurs LiveReload is reloading the page instead of injecting the style. If I switch back to compass watch then style injection occurs. Is it possible to have style injection with Gulp, Compass and LiveReload? I hope so because if not I will have to run compass watch in 1 terminal and gulp in another which seems a bit clunky. Here is the relevant code from the gulpfile.js
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
compass = require('gulp-compass'),
minifyCSS = require('gulp-minify-css'),
rev = require('gulp-rev'),
rename = require('gulp-rename'),
clean = require('gulp-clean'),
lr = require('tiny-lr'),
server = lr(),
livereload = require('gulp-livereload');
gulp.task('compass', function() {
gulp.src('./static/scss/*.scss')
.pipe(compass({
css: 'static/css',
sass: 'static/scss',
image: 'static/images',
font: 'static/fonts',
javascript: 'static/js',
comments: false,
style: 'expanded',
bundle_exec: true,
require: ['wegowise_styles/compass']
}))
.on('error', function(err) {})
.pipe(gulp.dest('./static/css/'))
.pipe(livereload(server))
.pipe(minifyCSS())
.pipe(rename({suffix: '.min'}))
.pipe(rev())
.pipe(gulp.dest('./static/production/'))
.pipe(rev.manifest())
.pipe(rename('css-manifest.json'))
.pipe(gulp.dest('./static/production/'));
});
gulp.task('clean', function() {
return gulp.src(['static/production'], {read: false})
.pipe(clean());
});
gulp.task('watch', function() {
gulp.watch('static/scss/**/*.scss', ['compass']);
gulp.watch('static/js/**/*.js', ['scripts']);
});
gulp.task('default', ['clean', 'watch']);
ps. I am using the LiveReload chrome extension
Yes, it is possible. I haven't seem in your code (maybe because you removed the rest of the file) when you start tiny-lr, i.e.:
var gutil = require('gulp-util');
gulp.task('tiny', function(next) {
server.listen(35729, function() {
gutil.log('Server listening on port: ', gutil.colors.magenta(port));
next();
});
});
// add as a dependency in your watch task
gulp.task('watch', ['tiny'], function() {
gulp.watch('static/scss/**/*.scss', ['compass']);
gulp.watch('static/js/**/*.js', ['scripts']);
});
The error might be related to the scripts task as well, so maybe include it in the question so we can take a look. Maybe, finally, there is some other task causing the issue.
In order to be sure, I just created a test here, and created a index.html file inside the static folder, pointing to css/file.css.
Created a simple static/scss/file.scss with a body background-color. I've used the same code snippet you provided for the rest of the gulpfile.
Also created a node-static server and served all files under static/ folder.
At the end, is there any other automated task involved in the building process?