it's the fifth day when I'm fighting this and I'm almost ready to give up (but I can't). I picked up a project from someone else and I'm trying to make gulp work.
I ended up with "could not find an option named "sourcemap".
Starting 'watch'...
[11:48:54] Finished 'watch' after 2.75 s
[11:49:32] Starting 'styles'...
[11:49:33] Could not find an option named "sourcemap".
Usage: dart-sass <input>
in gulpfile.js I've got this:
gulp.task('styles', () => {
return sass(['_/sass/main.scss', '_/sass/editor.scss', '_/sass/career-form.scss'], {
sourcemap: true, style: "compact"
})
})
even when I delete the sourcemap: true part, the error is still there. Gulp works with js files, but not with CSS. not sure if that matter.
I use gulp-ruby-sass and I tried everything there were related to the issue, but no luck. (The guy that worked before on that is not helpful - "I don't know, go Google the error").
I already tried to rebuild node_modules, five times, maybe more, checked different versions of gulp-ruby-sass and gulp-sourcemaps. Looked for another usage of sourcemap but no luck.
From the gulp-ruby-sass sourcemap option documentation it looks like if you use the sourcemap option than you must also use gulp-sourcemaps.
sourcemap
Type: boolean
Default: false
Initialize and pass Sass sourcemaps to gulp-sourcemaps.
So their code:
const gulp = require('gulp');
const sass = require('gulp-ruby-sass');
const sourcemaps = require('gulp-sourcemaps');
gulp.task('sass', () =>
sass('source/file.scss', {sourcemap: true})
.on('error', sass.logError)
// for inline sourcemaps
.pipe(sourcemaps.write())
// for file sourcemaps
.pipe(sourcemaps.write('maps', {
includeContent: false,
sourceRoot: 'source'
}))
.pipe(gulp.dest('result'))
);
So try them together. [Why you still get an error message if you remove the sourcemap option is strange.]
A late answer but still hope it could help.
If you use gulp-ruby-sass, you will have to install ruby.
However, gulp-ruby-sass has been deprecated, so it's better to switch to gulp-sass to compile Sass files.
Related
I'm trying to get my gulp pipeline working for a site but it doesn't seem to want to compress the scss, I've got all the sass compiling into a single css file but the file isn't compressed. I tried changing the raw files under node_modules thinking it may refresh the cache or something but it looks like this style doesn't work or that it doesn't to what I think it does.
function css() {
return gulp
.src('./scss/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({ style: 'compressed' }).on('error', sass.logError))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./css'));
}
Thanks
For those who are interested about possible values of outputStyle
nested
expanded
compact
compressed
f.e. with Gulp you could use it like .pipe(sass(outputStyle: 'expanded'))
(source https://inchoo.net/dev-talk/tools/sass-output-styles/)
So close, you need to change style with outputStyle and it should work.
See examples in the options section for gulp-sass.
function css() {
return gulp
.src('./scss/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./css'));
}
var paths = {
css: './public/apps/user/**/*.css'
}
var dest = {
css: './public/apps/user/css/'
}
// Minify and concat all css files
gulp.task('css', function(){
return gulp.src(paths.css)
.pipe(concatCSS('style.css'))
.pipe(minifyCSS({keepSpecialComments: 1}))
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest(dest.css))
});
When I first run the task it compiles alright and all changes are there.
After I change something and run it again it doesn't overwrite the existing minified css file. If I were to delete the minified css and run task again everything works perfect. Any insights?
Try and set the exact path, not a variable. Not that its not a good practice, just try without it.
Also , add a 'use strict'; to your task, so that you can be sure there are no serious errors with your settings. It will give you the right type of errors if there are any.
And, may I ask why are you concatenating your CSS before the production build?
Every file concatenation, minification and etc. should be performed in the 'build' task.
You have to delete your minified version of css before doing minify css.
To achieve this you can use gulp-clean
install gulp-clean as npm install gulp-clean
var gulp = require('gulp'),
concat = require('gulp-concat'),
cleanCSS = require('gulp-clean-css'), // this is to minify css
clean = require('gulp-clean'), //this is to delete files
gulp.task('del-custom-css', function(){
return gulp.src('./static/custom/css/custom.min.css',{force: true})
.pipe(clean())
});
gulp.task('minify-custom-css', ['del-custom-css'], function(){
return gulp.src(['./static/custom/css/*.css'])
.pipe(concat('custom.min.css'))
.pipe(cleanCSS())
.pipe(gulp.dest('./static/custom/css'))
});
Hope it helps.
I am attempting to make the switch from GruntJS to Gulp and have run into a problem with my Gulp task for processing my SASS files via Compass. The files compile just fine into the single CSS file as they did under my GruntJS implementation, but I am missing the line number comments that show me where the CSS rules come from such as:
/* line 26, ../_components/sass/_base.scss */
The code from my gulpfile.js for the task is:
gulp.task('compass', function() {
gulp.src(sassSources)
.pipe(compass({
comments: true,
sass: '_components/sass',
image: 'builds/dev/images',
style: 'nested'
})
.on('error', gutil.log))
.pipe(gulp.dest('builds/dev/css'))
});
Am I missing something?
Be careful with gulp-compass, it is not a gulp plugin (albeit named so) and has been blacklisted by the Gulp community for quite a while. It does not what Gulp plugins are supposed to do (e.g. it's possible to run them without gulp.src and gulp.dest), and other plugins are already doing its work perfectly fine. One of those plugins is gulp-ruby-sass. This setup might work for you:
var sass = require('gulp-ruby-sass');
gulp.task('compass', function() {
return sass(sassSources, {
compass: true,
lineNumbers: true
}).on('error', gutil.log))
.pipe(gulp.dest('builds/dev/css'))
});
This uses gulp-ruby-sass which is able to run with the compass extension. You see that I activated lineNumbers here to give you said output.
I see from your Gulpfile that you might have some extension requiring some images, I don't know exactly what that does, but if it's mandatory to your setup, you might better call compass directly (the command line tool) using require('child_process').exec(...)
You should add sass_options = { :line_numbers => true } to your config.rb file even if gulp-compass module doesn't support lineNumbers as an option.
important part of config.rb file
css_dir = 'app/assets/style/'
sass_dir = 'app/assets/style/sass/'
images_dir = 'app/assets/image/'
javascripts_dir = 'app/assets/script/'
sass_options = { :line_numbers => true }
And your gulp task should look like this
important part of gulpfile.js file
return gulp.src('./app/assets/style/sass/*.scss')
.pipe(plugins.compass({
config_file: './config.rb', // if you don't use a config file , you should start using immediately
css: './app/assets/style/',
sass: './app/assets/style/sass/',
image: './app/assets/image/',
line_comments: true,
sourcemap: true
}))
.pipe(gulp.dest('./app/assets/style/'));
I had trouble generating the line number comments using gulp-compass also. I tried a lot of things including matching all the plugin versions to the sample code I used to even completely discarding my code and use the full sample instead to no avail.
On top of its lack of compliance with gulp standards as #ddprrt suggested, gulp-compass seems to be broken now. Besides generating a stylesheet on the destination folder, it also generates another under the {app_root}/css folder. I suspect, the latter is some sort of caching, but that functionality is currently broken. As can be seen here, if you delete that stylesheet and re-run the task, the line number comments will finally show up. Below, I automated this by installing and using the gulp-clean-dest plugin. I have no tried using other plugins, but this hack handles the issue.
var gulp = require("gulp")
, compass = require("gulp-compass")
, cleanDest = require("gulp-clean-dest")
;
gulp.task("compass", function() {
gulp.src("components/sass/style.scss")
.pipe(compass(
{ "sass": "components/sass"
, "image": "builds/development/images"
, "style": "expanded"
, "comments": true
})
.on("error", gutil.log)
)
.pipe(gulp.dest("builds/development/css"))
.pipe(cleanDest("css"))
});
I've recently switched from Grunt to Gulp task runner.
Is it possible to output as comment the line number in the compiled CSS files that would indicate where a given rule came from in the SASS file?
Such feature was enabled by default when I was using grunt-contrib-compass module.
Now I'm using gulp-sass for compiling my sass files.
Yes it is possible you need to pass it the right options:
.pipe(sass({
sourceComments: 'map',
sourceMap: 'sass',
outputStyle: 'nested'
}))
You need to init gulp-sourcemaps as the following:
const sourcemaps = require('gulp-sourcemaps');
function buildStyles() {
return gulp.src('./sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./css'));
}
exports.buildStyles = buildStyles;
then you'll get nice embedded references to your source scss:
check docs https://github.com/dlmanning/gulp-sass
I'm using gulp-ruby-sass to compile my js and sass.
I ran into this error first TypeError: Arguments to path.join must be strings
Found this answer and it was because I was using sourcemaps with gulp-sass and the answer recommended using gulp-ruby-sass instead.
Next I tried to compile all my SASS files using this syntax:
gulp.task('sass', function () {
return sass('public/_sources/sass/**/*.scss', { style: 'compressed' })
.pipe(sourcemaps.init())
.pipe(concat('bitage_public.css'))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('public/_assets/css'))
.pipe(livereload());
});
Which produced this error:
gulp-ruby-sass stderr: Errno::ENOENT: No such file or directory - public/_sources/sass/**/*.scss
I then noticed in the answer I found the author wrote that globes ** aren't supported yet:
Also keep in mind, as of this writing when using gulp-ruby-sass 1.0.0-alpha, globs are not supported yet.
I did more digging and found a way to use an Array to specify the paths to my SASS files, so then I tried the following:
gulp.task('sass', function () {
return sass(['public/_sources/sass/*.scss',
'public/_sources/sass/layouts/*.scss',
'public/_sources/sass/modules/*.scss',
'public/_sources/sass/vendors/*.scss'], { style: 'compressed' })
// return sass('public/_sources/sass/**/*.scss', { style: 'compressed' })
.pipe(sourcemaps.init())
.pipe(concat('bitage_public.css'))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('public/_assets/css'))
.pipe(livereload());
});
But still I'm getting Errno::ENOENT: No such file or directory and it lists all the dirs I put into that array.
How do you compile SASS in multiple directories with gulp?
SASS source folder structure:
_sources
layouts
...scss
modules
...scss
vendors
...scss
main.scss
Figured it out!
Well not 100%, still not sure why the multiple path array didn't work.
Anyways so I forgot that in my main web.scss file I already had multiple import statements setup:
#import "vendors/normalize"; // Normalize stylesheet
#import "modules/reset"; // Reset stylesheet
#import "modules/base"; // Load base files
#import "modules/defaults"; // Defaults
#import "modules/inputs"; // Inputs & Selects
#import "modules/buttons"; // Buttons
#import "modules/layout"; // Load Layouts
#import "modules/svg"; // Load SVG
#import "modules/queries"; // Media Queries
So I didn't actually need to try use Gulp the way I was trying, I just needed to target that 1 .scss file directly. So I did that here:
// Compile public SASS
gulp.task('sass', function () {
return sass('public/_sources/sass/bitage_web.scss', { style: 'compressed' })
.pipe(sourcemaps.init())
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('public/_assets/css'))
.pipe(livereload());
});
Now it works because it sees a specific file to target and compile
I was having trouble using '*.scss' too
In the git documentation (https://github.com/sindresorhus/gulp-ruby-sass) they use this sintax:
gulp.task('sass', function(){
return sass('public/_sources/sass/',
{ style: 'compressed'})
.pipe(sourcemaps.init())
});
I tested it and it works, it compiles all the files within the folder.
Just in case someone has the same problem