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.
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']);
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 a styles task in my gulpfile:
gulp.task('styles', function () {
var sass = require('gulp-ruby-sass');
var autoprefixer = require('gulp-autoprefixer');
return gulp.src('app/styles/main.scss')
.pipe(sass({sourcemap: true, sourcemapPath: '../scss'}))
.on('error', function (err) { console.log(err.message); })
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('.tmp/styles'));
});
which generates this in the console:
[14:25:21] Starting 'styles'...
[14:25:21] gulp-ruby-sass: stderr: DEPRECATION WARNING: Passing --sourcemap without a value is deprecated.
Sourcemaps are now generated by default, so this flag has no effect.
[14:25:21] gulp-ruby-sass: directory
[14:25:25] gulp-ruby-sass: write main.css
write main.css.map
events.js:72
throw er; // Unhandled 'error' event
^
Error: /Users/stevelombardi/Documents/command-central/ccgulp/main.css.map:3:3: Unknown word
IF I comment out the pipe to autoprefixer, no errors, everything compiles. What's the deal here?
Note, I also cannot seem to disable the writing of a sourcemap. I tried all the other settings from the repo page for grunt-ruby-sass and none work.
I can live without autoprefixer, but would love to get it working...
The issue seems to happen related to the main.css.map, even if you didn't want one, using gulp-ruby-sass#0.7.1 at the time I am writing this.
I've come across two different solutions so far:
1) If you don't need sourcemaps:
gulp.task('styles', function() {
gulp.src('app/styles/main.scss')
.pipe(sass({
"sourcemap=none": true // hack to allow auto-prefixer to work
}))
.pipe(prefix("last 2 versions"))
.pipe(gulp.dest('css'));
});
This is what I have used as I recently encountered this issue.
2) If you do need sourcemaps:
Then you should try gulp-ruby-sass#1.0.0-alpha
(relevent github issue)
Instead of:
browsers: ['last 2 versions'],
Try this:
browsers: ['last 2 version'],
If that doesn't work, I've had better luck with gulp-sass and gulp-sourcemaps.
// Compile Sass & create sourcemap
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(sourcemaps.write())
.pipe(gulp.dest('css'))
// Autoprefix, load existing sourcemap, create updated sourcemap
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(autoprefixer('last 2 version')
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('css'))
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/'));
});
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.