I'm using Ruby sass with PostCSS. This is my gulp css task.
gulp.task('css', function () {
var processors = [
short,
rucksack,
postcssmodules
];
return gulp.src('./css/src/*.scss')
.pipe(postcss(processors, {syntax: scss}))
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./dest'));
});
Error I'm getting
➜ website git:(master) ✗ gulp css
[09:52:08] Using gulpfile ~/my-projects/website/gulpfile.js
[09:52:08] Starting 'css'...
[09:52:08] 'css' errored after 12 ms
[09:52:08] Error: must provide pattern
at new GlobSync (/Users/jitendravyas/my-projects/website/node_modules/glob/sync.js:29:11)
at Function.globSync [as sync] (/Users/jitendravyas/my-projects/website/node_modules/glob/sync.js:24:10)
at /Users/jitendravyas/my-projects/website/node_modules/gulp-ruby-sass/index.js:68:21
at Array.forEach (native)
at gulpRubySass (/Users/jitendravyas/my-projects/website/node_modules/gulp-ruby-sass/index.js:67:10)
at /Users/jitendravyas/my-projects/website/gulpfile.js:48:15
at taskWrapper (/Users/jitendravyas/my-projects/website/node_modules/undertaker/lib/set-task.js:13:15)
at bound (domain.js:287:14)
at runBound (domain.js:300:12)
at asyncRunner (/Users/jitendravyas/my-projects/website/node_modules/async-done/index.js:36:18)
You cannot use gulp-ruby-sass in a .pipe(). Read the docs:
Use gulp-ruby-sass instead of gulp.src to compile Sass files.
You'll have to use sass() before your postcss():
gulp.task('css', function() {
var processors = [
short,
rucksack,
postcssmodules
];
return sass('./css/src/*.scss')
.on('error', sass.logError)
.pipe(postcss(processors))
.pipe(gulp.dest('./dest'));
});
Related
I'm new to Gulp and was attempting to convert my Sass to CSS via a simple Gulp task.
I've tried the following (return statement):
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var uglifycss = require('gulp-uglifycss');
sass.compiler = require('node-sass');
//Compile Sass to CSS
function sass() {
return gulp.src('./assets/sass/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./assets/css'));
};
and (done)
//Complie Sass to CSS
function sass(done) {
gulp.src('./assets/sass/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./assets/css'))
done();
};
But both return with
[18:38:07] The following tasks did not complete: sass
[18:38:07] Did you forget to signal async completion?
I figured using the return statement or the done parameter would complete the task. I can't figure out why it's telling me the taks can't be completed.
I also have a very similar CSS minify task running (hence the uglify variable) that is working.
Any ideas?
Thanks!
I`m trying to create a valid Source Map with Gulp and gulp-sourcemaps. The Source Map is actually created, but inside, the "sources" parameter is not loading the appropriate paths of my SASS files. This is what I get:
"version":3,"file":"style.css","sources":["style.css"]
When I need to load something like this (created by Koala App):
"version":3,"file":"style.css","sources": ["../sass/style.scss","../sass/typography/_fonts.scss","../sass/helpers/_variables.scss"........
This is my Gulp Task
gulp.task('sass', function () {
return gulp.src('style/sass/**/*.scss')
.pipe(sass(
{
'outputStyle': 'expanded'
}
))
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('.')
.pipe(gulp.dest('./style/css'))
.pipe(bs.reload({stream: true}));
});
Thanks for the time.
The sourcemaps.init() must go before the sass pipe, so:
gulp.task('sass', function () {
return gulp.src('style/sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass( {
'outputStyle': 'expanded'
}).on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./style/css'))
.pipe(bs.reload({stream: true}));
});
See gulp-sass with sourcemaps.
You have two sass calls for some reason, get rid of the first and put its options into the second sass pipe call.
According to this it's possible to compile susy install from Ruby with Gulp.
But is it possible to use gulp-sass instead of gulp-compass or gulp-ruby-sass because of performance and deprecation ?
Actually I use this in my gulpfile.js:
gulpfile
var gulp = require('gulp');
// Include plugins
var plugins = require('gulp-load-plugins')();
// Variables de chemins
var source = './sass/**/*.scss'; // dossier de travail
var destination = './css/'; // dossier à livrer
gulp.task('sasscompil', function () {
return gulp.src(source)
.pipe(plugins.sass({
outputStyle: 'compressed',
includePaths: ['/home/webmaster/vendor/bundle/gems/susy-2.2.2/sass']
}).on('error', sasscompil.logError))
.pipe(plugins.csscomb())
.pipe(plugins.cssbeautify({indent: ' '}))
.pipe(plugins.autoprefixer())
.pipe(gulp.dest(destination + ''));
});
But the error log doesn't work because sasscompil isn't define.
Then I need to give the path for all ex-compass includes like susy, sassy-button,etc..
is it possible to give a global path for gems ?
other thing, do I install gulp plugins despite of using gulp-load-plugins ? because gulp doesn't find plugins if I don't do that.
Thanks
You need to change sasscompil.logError to plugins.sass.logError
such that
gulpfile.js
gulp.task('sasscompil', function () {
return gulp.src(source)
.pipe(plugins.sass({
outputStyle: 'compressed',
includePaths: ['/home/webmaster/vendor/bundle/gems/susy-2.2.2/sass']
}).on('error', plugins.sass.logError))
...
});
gulp-sass doc:
Pass in options just like you would for node-sass; they will be passed along just as if you were using node-sass. Except for the data option which is used by gulp-sass internally. Using the file option is also unsupported and results in undefined behaviour that may change without notice.
example
gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
I need to perform after mix.less ('app.less') automatically reloads the page. What would not press each time F5
gulpfile.js
var elixir = require('laravel-elixir');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Less
| file for our application, as well as publishing vendor resources.
|
*/
elixir(function(mix) {
mix.less('app.less');
mix.copy('resources/assets/vendor/bootstrap-switch/dist', 'public/packages/bootstrap-switch');
});
Is it possible to use it as a gulp browser-sync ?
I’m afraid there is no way to use livereload with elixir yet.
I suggest you to quite using elixir and start using all the freedom of general versatile gulp plugins.
My recipe for live reload with Livereload:
Install Livereload plugin for Chrome
Enable it pressing its button in Chrome’s toolbar
Install gulp-modules:
npm install gulp gulp-plumber gulp-connect gulp-sass --save-dev
Create simple gulpfile (with livereload of *.scss files only) like
below.
run gulp
Example of gulpfile.js
'use strict';
var
gulp = require('gulp'),
plumber = require('gulp-plumber'),
connect = require('gulp-connect'),
sass = require('gulp-sass');
gulp.task('sass', function () {
return gulp.src('public/css/*.sass')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('public/css'));
});
gulp.task('watch', ['sass'], function () {
gulp.watch(['resources/assets/sass/*.scss'],
function (e) {
gulp.src(e.path)
.pipe(plumber())
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('public/css'))
;
}
);
gulp.watch(['public/css/*.css',],
function (e) {
gulp.src(e.path)
.pipe(connect.reload())
;
}
);
});
gulp.task('server', ['watch'], function () {
connect.server({
root: 'public',
livereload: true
});
});
gulp.task('default', ['server']);
First install a plugin called laravel-elixir-livereload with
npm install --save-dev laravel-elixir-livereload
After that in your gulpfile.js write this:
var elixir = require('laravel-elixir');
require('laravel-elixir-livereload');
elixir( function(mix) {
mix.less('app.less')
.livereload();
});
Finally run
gulp watch
Documentation https://www.npmjs.com/package/laravel-elixir-livereload
You can use browsersync() without installing anything if you have Elixir 3.3 and Homestand
Run first: $ php artisan serve --host=0
On your gulpfile.js: mix.browserSync({proxy: 'localhost:8000'});
You can use the laravel-elixir-browsersync-official plugin.
Your gulpfile.js should look like this:
const elixir = require('laravel-elixir');
elixir((mix) => {
mix.less('app.less')
.copy('resources/assets/vendor/bootstrap-switch/dist', 'public/packages/bootstrap-switch')
.browserSync({
proxy: 'your-project.url'
})
});
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'))