Gulp folder compiling - sass

I am relatively new to gulp. I have one issue when I try to compile one directory with subfolders with their sass files.
Folder structure:
|_sass
|__folder1
| |_file.sass
|__folder2
| |_file.sass
|__folder3
|_file.sass
My simple gulp task to try the compilation
gulp.task('sass', function(){
return sass('sass/')
.pipe(gulp.dest('css');
}
This task above doesn't work with a folder but if I specify the file like in gulp task below, it works correctly.
gulp.task('sass', function(){
return sass('sass/folder1/file1.sass')
.pipe(gulp.dest('css');
}
I have checked the documentation of the repository (gulp-ruby-sass) and other topics in stackoverflow and the one solution that i have found is import all sass code into one file and compile it.
I have tried different paths: ./sass, sass, sass/ even the last syntax with gulp.src(path/**/*.sass) with gulp-sass repository as well.
Can you help me?
Thanks in advance

Edit: Using gulp-sass, not gulp-ruby-sass, since gulp-ruby-sass does only support single files, as mentioned in the docs:
gulp-ruby-sass doesn't support globs yet, only single files or directories. Just like Sass.
You should create a stream with valid glob arguments gulp.src() instead of just calling sass() directly and call it in a pipe():
gulp.task('sass', function (){
return gulp.src([
'sass/folder1/file.sass',
'sass/folder2/file.sass',
'sass/folder3/file.sass'
])
.pipe(sass())
.pipe(gulp.dest('css'));
});
If the files you just want to import are named correctly (starting with an underscore), this should work as well:
gulp.task('sass', function (){
return gulp.src('sass/**/*.sass')
.pipe(sass())
.pipe(gulp.dest('css'));
});
Edit: Fixed some code errors - SO needs a linter (;

Related

SCSS importing not fully working

I am having trouble connecting files.
file style.scss
#import 'foundation/foundation';
file foundation/_foundation.scss
/**
Some comment
*/
#import '../../../node_modules/foundation-sites/_vendor/normalize-scss/sass/normalize';
outputed file style.css
/**
Some comment
*/
As you can see I am getting only comment, no imported CSS rules.
Here are my gulp tasks
gulp.task('sass', function () {
return gulp.src('./app/scss/style.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./public/css'));
});
gulp.task('watch', () => {
gulp.watch('./app/scss/**/*.scss', ['sass']);
});
I have not used gulp node sass yet, but have found for cli access as well as manual processes, you need include-path items or an importer function, even if you use explicit paths within the import calls.
You should also check to see that what you imported is not all mixins and functions/variables, since they only operate on the include calls that summon them. if you set a variable and never use it, it won't compile css
Also: you are having it watch a recursive path for sass changes, but hard coded the input, try accepting stdin/pipe on the sass task

Gulp / SCSS to CSS Working (but not working)

I REALLY hope this isnt a duplicate but i have searched countless posts on here and cant find this specific issue, hopefully the stackoverflow community can help
I am new to Gulp and Sass and am in the process of setting up a simple template to experiement and prepare future projects, but ive hit a snag
i have the following folder structure for testing (il adjust this when its all working to be better)
Template
-- node_modules
-- stylesheets
-----test.scss
-----test.css (generated by the gulpfile.js)
gulpfile.js
package.json
my gulp file is as follows, a simple watch on test.scss to create and update test.css
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('styles', function() {
return gulp.src('stylesheets/**/*.scss')
.pipe(sass().on('error', sass.logError));
});
//Watch task
gulp.task('default',function() {
gulp.watch('stylesheets/**/*.scss', ['styles']);
});
Now when i run gulp and save a style in test.scss i get something like this in cmd
Starting 'styles'...
Finished 'styles' after 49 ms
So i believe there are no errors, however when i look in the test.css file that is created / updated there are no styles!
it does however copy over comments... so if i put in /* comment / into test.scss then sure enough / comment */ appears in text.css
gulp-sass installed succesfully but im really confused as to what im missing
Thanks in advance
James
P.S, versions of things etc, i also have a XAMPP webserver set up locally
Node => v6.11.1,
gulp => CLI version 1.3.1, Local version 3.9.1,
ruby => 2.4.1p111,
sass => 3.5.1 (Bleeding Edge)
npm => 3.10.10
I think
gulp.task('styles', function() {
return gulp.src('stylesheets/**/*.scss')
.pipe(sass().on('error', sass.logError));
});
should be
gulp.task('styles', function() {
return gulp.src('stylesheets/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./stylesheets'));
});

Using gulp-ruby-sass to import parcels into source file during compile time

My goal is to use one scss file with n number of asset partials to create n number of css stylesheets while using gulp-ruby-sass.
Here is an example of my directory structure:
- project_folder
gulpfile.js
- css
_asset.scss
style.scss
Inside "gulpfile.js" would have the following:
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
gulp.task('build', function() {
return sass([
'css/_asset.scss',
'css/**/*.scss'
])
.pipe(gulp.dest('css'));
});
gulp.task('default', ['build']);
Inside "_asset.scss" would have the following:
$textColor: #444444;
Inside "style.scss" would have the following:
//#import "_asset";
.myTextColor {
color: $textColor;
}
By running gulp I would get the error:
error css/style.scss (Line 3: Undefined variable: "$textColor".)
Let's say I was to uncomment line 1 in style.scss. Then running gulp should properly compile style.scss to create style.css, but uncommenting line 1 is not the answer I am looking for. I need gulp to use gulp-ruby-sass or some other plugin to do exactly what line 1 on style.scss is doing, or something like on to it, and get the same results.
P.S. (Hopefully, with this solution I can use 'gulp-rename' and be able to produce multiple css stylesheets using multiple asset files, and only use one scss file!)

How to use preinstalled node modules from laravel-elixir in Laravel 5

Laravel elixir already comes with bunch of its own dependent node modules. How to use that modules instead of creating dependency in the root package.json.
For example, I want to use "del" package which is already there in /node_modules/laravel-elixir/node_modules/del, so rather than mentioning it on the /package.json, how can use this one?
You could try to set up your gulp file like this:
var gulp = require('gulp'),
del = require('del');
gulp.task('default', function() {
});
gulp.task('watch', function() {
gulp.watch('resources/**', ['default']);
elixir(function(mix) {
//Standard elixir code
});
});
Do note typing $ gulp in cli won't do anything anymore, unless you define something in the default task. $ gulp watch will work as always though.
I have no idea if this works without first requiring the dependency in package.json, but give it a try :)

gulp-sass not compiling sass files

I'm actually trying to build a gulp planning to do web related stuff, like compile sass, minify css, uglify javascript and so on. But I'm really having troubles with sass.
Here's a sample of my code :
gulp.task('compile-sass', function() {
gulp.src(buildType+config.path.sass+"/main.sass")
.pipe(compass({
css: 'css',
sass: 'sass'
}))
.pipe(gulp.dest(buildType+config.path.css+"/test"));
});
So I'm using compass here because i only have *.sass files and no .scss so gulp-sass wouldn't work for me. Therefore, I'm asking if anyone could give me a hint of why this task doesn't work. Here's what my console returns :
[gulp] Starting 'compile-sass'...
[gulp] Finished 'compile-sass' after 6.11 ms
[gulp] You must compile individual stylesheets from the project directory.
events.js:72
throw er; // Unhandled 'error' event
^
[gulp] Error in plugin 'gulp-compass': Compass failed
at Transform.<anonymous> (/Users/myusername/node_modules/gulp-compass/index.js:37:28)
at ChildProcess.<anonymous> (/Users/myusername/node_modules/gulp-compass/lib/compass.js:136:7)
at ChildProcess.EventEmitter.emit (events.js:98:17)
at maybeClose (child_process.js:753:16)
at Socket.<anonymous> (child_process.js:966:11)
at Socket.EventEmitter.emit (events.js:95:17)
at Pipe.close (net.js:465:12)
I know I'm not using any config.rb, but two things :
1) I found no example of such files
2) gulp-compass doc gives example without such a file so I assume it's optional
Thanks in advance.
Thanks to SteveLacy i could manage to fix this.
If you only have .sass files, and no .scss, you need to use gulp-ruby-sass instead of gulp-compass or gulp-sass. Here is a sample of my working code :
var sass = require('gulp-ruby-sass');
gulp.task('compile-sass', function() {
gulp.src(path/to/your/sass/folder/main.sass")
.pipe(sass())
.pipe(gulp.dest('path/to/your/css/folder));
});
The most basic and simple way is:
var sass = require('gulp-ruby-sass');
gulp.task('styles', function() {
gulp.src('sass/*.scss')
.pipe(sass({
noCache : true,
style : "compact"
}))
.pipe(gulp.dest('css'));
});
The newest version of node-sass which is used by gulp-sass supports sass and scss syntax.
https://github.com/sass/node-sass/releases
or the latest release at this moment
https://github.com/sass/node-sass/releases/tag/v0.9.3
node-sass is using libsasss
https://github.com/sass/libsass/releases
Look at their 2.0 release notes.
I know this may not be the correct place for this answer, but there wasn't much on Google for people with gulp-ruby-sass errors.
For anyone receiving an error "source does not match any files." Be sure to make sure the path(s) you place within gulp.src() have at least 1 sass (or scss) file within them.
In my situation, I had 3 paths for the task and only 1 of the paths was completely empty. By adding a blank file (_fake.scss) to that path the error was fixed.
Hope this helps someone!
Newer versions of node-sass (and therefore gulp-sass, which is just a thin wrapper around node-sass) handle both sass and scss syntax, and decides which syntax to use by reading the file extension.
Here is a demonstration of a gulp file which handles both scss and sass syntax (not that you'd want that in your project):
var sass = require('gulp-sass');
sass.compiler = require('node-sass');
gulp.task('my-sass-task', function () {
return gulp.src('styles/**/*.sass') // note file ext
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('static'));
});
gulp.task('my-scss-task', function () {
return gulp.src('styles/**/*.scss') // note file ext
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('static'));
});
This doesn't seem to be documented anywhere easy to find, I just happened to stumble on it.
Side note: I was wooed by sass but think I'll be moving to scss instead. This SO question has a lot of useful information in the answers if you're hovering over which to choose.

Resources