Send arguments to gulp task - terminal

There are other questions on stackoverflow about this topic, but not the one I was hoping for.
Here is a simplified version of my gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('css', function() {
gulp.src('site/scss/style.scss')
.pipe(sass())
.pipe(gulp.dest('assets/css'))
});
gulp.task('watch', function() {
gulp.watch('site/scss/**/*.scss', ['css']);
});
I can do this successfully:
gulp watch
Now I want to be able to do something like this in my terminal command line:
gulp watch my-domain-name
or
gulp watch my-other-domain
My gulpfile would in my mind look something like this:
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('css', function(name) {
gulp.src('site/scss/style.scss')
.pipe(sass())
.pipe(gulp.dest('assets/css'))
});
gulp.task('watch', function(name) {
gulp.watch('site/scss/**/*.scss', ['css', name]);
});
I try to send name around as a variable of my watch task. In my case it would be my-domain-name or my-other-domain depending on what I write in my terminal.
How can I send a parameter from the terminal to the watch task and then over to the css task?

There are a number of sources for passing parameters from the command line to gulp. See:
https://www.sitepoint.com/pass-parameters-gulp-tasks/
https://github.com/gulpjs/gulp/blob/master/docs/recipes/pass-arguments-from-cli.md
The official recipe uses
minimist an extremely popular package.
So with these approaches you would not be passing the command line args directly to the watch task, but rather to an object that can be accessed by any task.
And it look like gulp-param may do exactly what you want, directly injecting command line args into each task's callback function.

Related

"Did you forget to signal async completion?"

I am receiving the error message: "The following tasks did not complete: default, sass. Did you forget to signal async completion?" I am new to Gulp and trying to figure out what the mistake is. I believe it's something with my syntax, but as I am new to Gulp, I can't quite pinpoint it. Below are the contents of my gulpfile. Thank you in advance.
use strict';
var gulp = require('gulp'),
sass = require('gulp-sass'),
watch = require('gulp-watch');
gulp.task('sass', function(){
gulp.src('./assets/sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('../style.css'));
});
gulp.task('default', gulp.series('sass', function() {
return gulp.watch('./assets/sass/**/*.scss', ['sass']);
}));

Can't get simple Sass task to complete in Gulp

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!

Dealing with Gulp, Bundler, Ruby and Susy

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'));
});

Gulp watch deleting css on second run

I'm using CodeAnywhere (cloud IDE) and installing gulp. Running 'gulp sass' works fine every time, but when I 'gulp watch' the 'sass' task runs fine the first time. After that it just creates an empty style.css file. I'm following the 'gulp for beginners' post on css-tricks.
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function() {
return gulp.src('src/scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('src/css'))
})
gulp.task('watch', function() {
gulp.watch('src/scss/**/*.scss', ['sass']);
})
My file structure is laid out as follows:

Lint SASS in Gulp before compiling

I'm new at Gulp and I'm trying to lint scss files before compiling them in order to avoid gulp watcher breaking.
My gulpfile.js looks like this now:
gulp.task('default', ['watch']);
// Sass compilation to css
gulp.task('build-css', function() {
return gulp.src('source/scss/**/*.scss')
.pipe(sourcemaps.init()) // Process the original sources
.pipe(sass())
.pipe(sourcemaps.write()) // Add the map to modified source.
.pipe(gulp.dest('public/assets/css'));
});
// Configure which files to watch and what tasks to use on file changes
gulp.task('watch', function() {
gulp.watch('source/scss/**/*.scss', ['build-css']);
});
And when I enter a mistake in a scss file like:
body {
color: $non-existing-var;
}
The gulp watcher shows error info but stops watching cause gulp breaks its execution. How can I solve this?
I will assume you are using gulp-sass pluging, if you are not using, I suggest you to do it. It is a wrapper over node-sass, which is the C version: super fast :)
On gulp-sass documentation, they already have you covered with one example, so your task should look like this:
gulp.task('build-css', function() {
return gulp.src('source/scss/**/*.scss')
.pipe(sourcemaps.init()) // Process the original sources
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write()) // Add the map to modified source.
.pipe(gulp.dest('public/assets/css'));
});
Hope this helps you to accomplish what you are looking for :)

Resources