Develop Reference

Gulp don't move file

I'm trying to move file from a directory to an other with gulp, but when i run my gulpfile, nothing happens, and i have this output
[19:25:22] Using gulpfile ~/Dev/Anikey/gulpfile.js
[19:25:22] Starting 'default'...
[19:25:22] Finished 'default' after 19 ms
My gulpfile.js :
const {src, dest} = require('gulp');
function copy() {
return src('src/public/style/*.css')
.pipe(dest('dist/style/'))
}
exports.default = copy;
Do someone know how to fix that please ?

I found this https://fettblog.eu/gulp-4-parallel-and-series/
As mentionned in this article, the new task execution using gulp 4 required gulp.series for sequential execution and gulp.parallel for parallel execution.
So try to add a build task with series like this, even if you have only 1 task :
const gulp = require('gulp');
const copy = () => {
return gulp.src('src/public/style/*.css')
.pipe(gulp.dest('dist/style/'))
}
const build = gulp.series(copy);
exports.default = build;

I fix the problem myself by using npm instead of yarn. To replace yarn, I deleted all dependencies file and then do a npm install, and just after a npx gulp - - watch and it works

gulp-sass with Gulp 4.0 and gulp-cli 4.0 not piping css

I am working with the latest version of Node, Gulp and gulp-cli. My gulpfile.js is exactly like this. Trying out gulp to teach myself.
var gulp = require('gulp'),
sass = require('gulp-sass');
gulp.task('default', function(){
return gulp.src("./styles/_site.scss")
.pipe(sass())
.pipe(gulp.dest("./public"));
});
When I run gulp, I get nothing at the destination. No error is thrown.
I removed the pipe to sass plugin and ran the task, which then is expected to simply copy the file to the destination), and it did.
Then I used gulp-plumber on the stream.
var gulp = require('gulp'),
sass = require('gulp-sass'),
plumber = require('gulp-plumber');
gulp.task('default', function(){
try {
var bla = sass();
var blah = gulp.src("./styles/_site.scss")
.pipe(plumber({
handleError: function (err) {
console.log(err);
this.emit('end');
}
}))
.pipe(sass())
.pipe(gulp.dest("./public"));
} catch(ex) {
console.log(ex);
var blah = gulp.src("./styles/_site.scss")
.pipe(gulp.dest("./public"));
} finally {
return blah;
}
});
I use vs code (again, the latest version;) to debug..
The task ran with no errors caught, even with the plumber. I am lost here and would really appreciate some suggestions.
PS: I tried out gulp-less to see if it could convert from *.less to *.css and it did. Had no issues there.

Rename _site.scss to site.scss.
gulp-sass quietly skips all files starting with an underscore. This is because as a convention, partials (i.e. files that you want to import but should not compile to a separate CSS output) must have their name starting with an underscore.
Since you intend to output a CSS file for this input SCSS file, you should not have it marked as a partial, thus you should not have a leading underscore.

gulp tasks sharing a common setting without a global object

I have a number of gulp tasks each residing in its own file (using the require-dir module) rather than a monolithic file.
I am using modules for configuration settings instead of json files (which I prefer for comments and for derived values).
To keep things simple here is an example setup with a single key I need to share/set between the gulp tasks.
/config/index.js
var config = {}
config.buildType = ''; // set this to either 'dev' or 'dist'
module.exports = config;
here is default task for which I want to set config.buildType to 'dev'
default.js
var gulp = require('gulp');
var config = require('../config/');
gulp.task('default', ['build'], function(cb) {
});
here is a deploy task for which I want to set buildType to 'dist'
deploy.js
var gulp = require('gulp');
var config = require('../config/');
gulp.task('deploy-s3', ['build'], function() {
});
here is a build task that I want to change based on buildType
build.js
var gulp = require('gulp');
var runSequence = require('run-sequence');
var config = require('../config/');
gulp.task('build', function(cb) {
console.log('in build',config.buildType);
if (config.buildType == 'dev') runSequence('clean',['sass',config.htmlGenerator], 'watch', cb);
if (config.buildType == 'dist') runSequence('clean',['sass',config.htmlGenerator], cb);
});
So here is the issue If I set config.buildType in default.js or deploy.js outside gulp.task then since they are all lumped into essentially one file by require-dir the value is simply whichever file was loaded last. If I set it inside the gulp.task function I am confused about about the timing/scope of that setting.
Update: Found this related issue https://github.com/gulpjs/gulp/issues/193. It was pointed out in this issue the task function starts after all the queued tasks so that means I can't set something inside the task function and expect it to be executed before the listed tasks (in my case 'build')
one poster made a task to set a parameter like this
gulp.task('set-dist', function () {
config.buildType = 'dist';
});
gulp.task('deploy', ['set-dist', 'build']);
So some advice..... do I go the way of this "hack" or is there some better way to do this??
(fyi, I am just a couple months into learning node/javascript on my own so my experience is limited)

You can use process.env to hold config attributes for your project. Check this.
In your case you can do:
var gulp = require('gulp');
var runSequence = require('run-sequence');
gulp.task('build', function(cb) {
if (process.env.NODE_ENV === 'development') {
runSequence('clean',['sass',config.htmlGenerator], 'watch', cb);
} else {
runSequence('clean',['sass',config.htmlGenerator], cb);
}
});
gulp build NODE_ENV=production for production
or gulp build NODE_ENV=development.
This will play nicely with existing CI tools like Travis.

Decided to go with this dropping the 'build' task altogether. It will hopefully work in some similar form after gulp 4.0 is released. It allows me to modify any setting before calling other tasks. Can use it with gulpif in tasks like my 'sass' task which is a pipe only task. Still wondering if there is a "better" way.
var gulp = require('gulp');
var config = require('../config/');
var runSequence = require('run-sequence');
gulp.task('default', function(cb) {
config.buildType='dev'
config.url = 'http://localhost:' + config.localport;
runSequence('clean',['sass',config.htmlGenerator],'watch', cb);
});

gulp watch doesn't watch

Following is my gulpfile.js. There are a couple of more tasks in it and all are working fine - but the last task, watch doesn't.
I've tried every possible combination of paths and files and what so ever, but still I don't have luck. I've read many answers on this here, but couldn't solve my problem. I tried to run gulp.watch with and without requiring gulp-watch, tried several different approaches on how to set up the task and so on and so on...
var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var watch = require('gulp-watch');
gulp.task('application', function() {
return browserify('./public/resources/jsx/application.js')
.transform(babelify, { stage: 0 })
.bundle()
.on('error', function(e){
console.log(e.message);
this.emit('end');
})
.pipe(source('appBundle.js'))
.pipe(gulp.dest('./public/resources/jsx'));
});
gulp.task('watch', function() {
gulp.watch('./public/resources/jsx/project/*.js',['application'])
});
Can someone suggest a solution?
EDIT:
Here's the console output:
michael#michael-desktop:/opt/PhpstormProjects/app_april_2015$ gulp watch
[23:05:03] Using gulpfile /opt/PhpstormProjects/app_april_2015/gulpfile.js
[23:05:03] Starting 'watch'...
[23:05:03] Finished 'watch' after 13 ms

You should return watch:
gulp.task('watch', function() {
return gulp.watch('./public/resources/jsx/project/*.js',['application'])
});
watch is an async method, so the only way Gulp can know that something is happening is if you return a promise, which watch does.
Edit
As #JMM stated, watch doesn't return a Promise. It returns an EventEmitter.

Node.js: how do I pass global variable into a file being inserted through require()?

I've split my gulpfile.js into several files in a /gulp folder to organize the code a little better. But now I want to pass a variable debug (boolean) into the files that will switch behaviour of the gulp command being included (eventually I will use command-line arguments, but for now I just want to make it work with a variable).
The way I've got this setup, using a method I saw in a yeoman angular/gulp package, is using an npm module called require-dir (which loads all *.js files in the /gulp folder, where each has a set of gulp tasks that are set).
gulpfile.js:
var gulp = require('gulp'),
run = require('run-sequence'),
debug = true;
require('require-dir')('./gulp');
gulp.task('default', ['build', 'server', 'watch', '...']);
Which would load something like...
gulp/build.js:
var gulp = require('gulp'),
plumber = require('gulp-plumber'),
...;
gulp.task('build', function () {
console.log(debug);
});
So when I run command gulp, which runs the default task, it will load build.js and then execute the build gulp task. But unfortunately, it seems that debug returns undefined.
How could I get this to work?
I was looking at using just module.exports() and node's require() method, but I couldn't figure out how to get the gulp task inside the included file to declare, so that it could then be run from the main gulpfile.js file (in the desired sequence).
Can anyone offer some assistance? Thanks

The normal module way, really. Just change that gulp/build.js file from not actually exporting anything to a proper require-able module:
module.exports = function(debug) {
"use strict";
var gulp = require('gulp'),
plumber = require('gulp-plumber'),
...;
gulp.task('build', function () {
console.log(debug);
});
};
and then call it in your main file as:
...
var loadGulp = require('require-dir/gulp');
...
var debug = true;
loadGulp(debug);

Node.js offers a single global variable named global which is, in fact, the same instance in all modules (unlike module which is different in each module). By setting values on global they become truly global. As an added bonus, you don't need the prefix access to global variables with global.. Both global.foo and just foo are equivalent so long as you don't have another variable named foo in scope.

I just create one object with all variables in it that I export as a module so I can use it throughout all my task files. For example
js/tasks/variables.js
module.exports = {
myBool: true
};
js/tasks/sass.js
var gulp = require('gulp'),
$ = require('gulp-load-plugins')(),
log = $.util.log,
vars = require('./variables');
gulp.task('sass', function () {
log('myBool: ' + vars.myBool); // logs "myBool: true"
vars.myBool = false;
});
js/tasks/build.js
var gulp = require('gulp'),
$ = require('gulp-load-plugins')(),
log = $.util.log,
vars = require('./variables');
gulp.task('build', function () {
log('myBool: ' + vars.myBool); // logs "myBool: false"
});
/gulpfile.js
Then you can get/set those variables from anywhere:
var gulp = require('gulp'),
$ = require('gulp-load-plugins')(),
runSequence = require('run-sequence'),
vars = require('./js/tasks/variables'),
requireDir = require('require-dir')('./js/tasks');
gulp.task('production', function(){
runSequence('sass', 'build');
});