I've started working with Gulp and the problem I'm having is getting gulp-chug to work properly.
I've followed everything in the documentation, telling my gulpfile to watch all gulpfiles within certain directories, whereas it only watches one file.
This is the code I have used following the documentation...
var gulp = require('gulp');
var chug = require('gulp-chug');
gulp.task('default', function () {
gulp.src('**/task_runner/gulpfile.js')
.pipe(chug());
});
I even tried to see if it makes a difference if I put the filepath in an array...
...
gulp.src(
[ '**/task_runner/gulpfile.js' ]
)
...
I also tried this (and a version without the array in gulp.src())...
...
gulp.src(
[ 'Project_01/task_runner/gulpfile.js', 'Project_02/task_runner/gulpfile.js' ]
)
...
...and it still does the same thing.
My file structure looks like this,
*root*
node_modules
gulpfile.js
package.json
Project_01
css
scss
task_runner
Project_02
css
scss
task_runner
All the gulpfiles work when running them individually, but I want them all to run at the same time within one cmd window with gulp-chug.
This is what my cmd looks like, which is showing that it's only watching Project_02,
C:\Users\WaheedJ\Desktop\UniServer\www\Practice\gulp>gulp
[14:19:40] Using gulpfile ~\Desktop\UniServer\www\Practice\gulp\gulpfile.js
[14:19:40] Starting 'default'...
[14:19:40] Finished 'default' after 6.37 ms
[gulp-chug] File is a buffer. Need to write buffer to temp file...
[gulp-chug] Writing buffer to Project_02\task_runner\gulpfile.tmp.1411996780120.
js...
[gulp-chug] Spawning process C:\Users\WaheedJ\Desktop\UniServer\www\Practice\gul
p\Project_02\task_runner\node_modules\gulp\bin\gulp.js with args C:\Users\Waheed
J\Desktop\UniServer\www\Practice\gulp\Project_02\task_runner\node_modules\gulp\b
in\gulp.js --gulpfile gulpfile.tmp.1411996780120.js default from directory C:\Us
ers\WaheedJ\Desktop\UniServer\www\Practice\gulp\Project_02\task_runner...
[gulp-chug](Project_02\task_runner\gulpfile.tmp.1411996780120.js) [14:19:42] Usi
ng gulpfile ~\Desktop\UniServer\www\Practice\gulp\Project_02\task_runner\gulpfil
e.tmp.1411996780120.js
[gulp-chug](Project_02\task_runner\gulpfile.tmp.1411996780120.js) [14:19:42] Sta
rting 'watch'...
[gulp-chug](Project_02\task_runner\gulpfile.tmp.1411996780120.js) [14:19:43] Fin
ished 'watch' after 18 ms
[14:19:43] Starting 'default'...
[14:19:43] Finished 'default' after 7.13 µs
What can I do to fix this?
I have the same thing happening. For now i employed this workaround :
gulp.task('default', ['one-gulpfile', 'another-gulpfile'], function () {});
gulp.task('one-gulpfile', function () { return gulp.src('./project-one/gulpfile.js').pipe(chug()); });
gulp.task('another-gulpfile', function () { return gulp.src('./project-another/gulpfile.js').pipe(chug()); });
Basically an empty default task, with dependencies on hard coded tasks that each, run one gulp file.
Of course not dynamic, and needs maintenance, but I got it going which is what i needed most at this point in time. I hope to see chug mature a bit more.
Related
I need some help.
I'm looking for a way to generate (or update if the file already exists) a .css file that is a conversion by an .scss file. All of this when compiling.
Explaining this in a better way :
I'm writing some code, everything is ok and I decide to save. Perfect. ctrl+s and the app run perfectly. Nice. Now I've added a style.scss file somewhere (it doesn't really matter the path). How do I "tell" to the compiler that everytime he compile he also has to 'take' this .scss file, convert it in a .css file, and put it in a specific path?
Well, I found a way to do what I needed to do.
I've created my gulpfile.js in this way :
var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
gulp.task('styles', function () {
gulp.src('src/app/sass/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css/'));
});
gulp.task('watch', function () {
gulp.watch('./sass/**/*.scss', ['styles']);
});
And added this command to package.json :
"try": "gulp watch && ng s"
the problem is that if in the cli I run the command npm run try it will never start my application, because the watch is an endless stream.
How can I have the watch and the app running both at the same time?
*Edit
Found the solution using concurrently
I have the following project structure (monorepo with many packages)
/pkgA
gulpfile.js
/pkgB
gulpfile.js
/pkgC
gulpfile.js
Each package has a gulpfile.js which just loads /shared/shared-gulp-tasks.js
Important: we want to keep this independence (so that I can run gulp whatever only for a given package, if wanted) - i.e. I don't want to remove the existing tasks from the shared gulpfile, I want to reuse them.
If we want to build everything at once, we run a task synchronously like this:
bash for-each-package.sh "gulp package"
Which does something like
cd pkgA
gulp package
cd pkgB
gulp package
cd pkgC
gulp package
However this is slow, because I start gulp executable from scratch for each package, and it takes ~3 seconds every time to load gulp and all the needed deps. (we have 20+ subpackages).
What I want is to have a task defined in gulpfile.js in the root which would let me do
gulp package-all
The code would look like this:
gulp.task('package-all', function(done) {
['pkgA', 'pkgB', 'pkgC'].forEach(function(pkgName) {
process.chdir(path.join(__dirname, pkgName));
// need to run 'package' task here, synchronously
// gulp.start('package'); is async
});
done();
}
Note that folder-specific package task is already declared in shared gulpfile and I don't want to rewrite it.
The problem is that I want to do this synchronously, and when all folders are finished processing, call done().
Options explored so far:
gulp.run is deprecated, gulp.start is undocumented, generally not advised
and they don't work in this case (they are async)
runSequence looks promising, but how would I run same task many times, per-folder, with cd to that folder before
I am aware that what I ask is kind-of orthogonal to "the gulp way" but I don't want to rewrite all my tasks.
What can be a good way to achieve my goals?
Finally I solved the issue by using run-sequence and creating fake tasks (not sure if there's an easier way - BTW it seems that gulp tasks can not be anonymous, you can't just pass functions to run-sequence, you need to pass string names of registered gulp tasks) and then a sequence out of those tasks (and passing done at the end of the sequence).
gulpfile.js
var runSequence = require('run-sequence');
var gulp = require('gulp');
require('./shared-gulp-tasks')(gulp);
var folders = ['pkgA', 'pkgB', 'pkgC']; // this array comes from external helper method which reads it from disk
function registerTaskForAllFolders(wrappedTaskName) {
var tasksToExecute = [];
folders.forEach(function(folderName) {
var taskName = wrappedTaskName + '_' + folderName;
gulp.task(taskName, function(done) {
console.log(folderName);
process.chdir(path.join(__dirname, folderName));
runSequence(wrappedTaskName, done);
});
tasksToExecute.push(taskName);
});
gulp.task(wrappedTaskName + '-all', function(done) {
tasksToExecute.push(done);
runSequence.apply(null, tasksToExecute);
});
}
// this registers a task called 'nothing-all'
registerTaskForAllFolders('nothing');
// this registers a task called 'clean-all'
registerTaskForAllFolders('clean');
// this registers a task called 'package-all'
registerTaskForAllFolders('package');
shared-gulp-tasks.js
module.exports = function(gulp) {
gulp.task('nothing', function(done) {
console.log('doing nothing in ' + process.cwd());
done();
});
}
terminal
gulp nothing-all
output
[17:08:51] Starting 'nothing-all'...
[17:08:52] Starting 'nothing_pkgA'...
[17:08:52] Starting 'nothing'...
doing nothing in d:\git\myproject\pkgA
[17:08:52] Finished 'nothing' after 171 μs
[17:08:52] Finished 'nothing_pkgA' after 2.23 ms
[17:08:52] Starting 'nothing_pkgB'...
[17:08:52] Starting 'nothing'...
doing nothing in d:\git\myproject\pkgB
[17:08:52] Finished 'nothing' after 2.03 ms
[17:08:52] Finished 'nothing_pkgB' after 11 ms
[17:08:52] Starting 'nothing_pkgC'...
[17:08:52] Starting 'nothing'...
doing nothing in d:\git\myproject\pkgC
[17:08:52] Finished 'nothing' after 1.93 ms
[17:08:52] Finished 'nothing_pkgC' after 11 ms
[17:08:52] Finished 'nothing-all' after 345 ms
Similar to other questions, in this very watered-down snippet, running the default gulp task (via npm start which runs gulp); this snippet creates an infinite loop running the scripts task over and over. Here is the gulpfile.js (literally the whole thing at the moment):
'use strict';
const gulp = require('gulp');
// COPY SCRIPTS TO BUILD FOLDER
gulp.task('scripts', function() {
return gulp.src('./scripts/**/*.js')
.pipe(gulp.dest('build/scripts'))
});
// WATCH FILES
gulp.task('watch', function() {
gulp.watch('./scripts/**/*.js', ['scripts']);
});
// DEFAULT
gulp.task('default', ['watch']);
The extra odd thing is that whether the build folder is built anew or not, the scripts task will be executed immediately after calling npm start! And the loop begins.
In case you're curious, here is the pasted (and only) scripts object in my package.json:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "gulp"
},
The only other thing in my directory is a scripts folder with an app.js and an home.js file in it. Obviously once this task is run, the build folder is created (if it wasn't already there yet) and the two aforementioned files are copied into it.
You can see I'm only looking for scripts in the root directory's first level folder called scripts, so I shouldn't have an infinite loop by referencing changes on the same set of scripts. Also, even if I'm explicit, and point to exactly one particular file with a relative path such as ./scripts/home.js this still happens.
I'm anticipating being embarrassed, but I'm utterly confused.
A few things I've picked up on which could be causing some errors.
EDIT -
Try the watch plugin npm install --save-dev gulp-watch
// Try and declare your plugins like this for now.
var gulp = require('gulp'),
watch = require('gulp-watch');
// Provide a callback, cb
gulp.task('scripts', function(cb) {
// Dont use ./ on your src as watch can have a problem with this
return gulp.src('scripts/**/*.js')
.pipe(gulp.dest('./build/scripts'), cb); // call cb and dont forget ;
});
// remove ./ on watch
gulp.task('watch', function() {
gulp.watch('scripts/**/*.js', ['scripts']);
});
gulp.task('default', ['watch']);
So that is pretty weird behaviour but this should do the trick.
The only time I use ./ within gulp is on my dest.
Also just remember that gulpfile is just a JS so remember your semicolon, etc.
I cannot guarantee the resolution here, but I had a two variables that changed when this was resolved:
I upgraded my Parallels VM application (on an Apple PowerBook) from
version 10 -> 11.
I reinstalled Windows 10 using another license for a current version
(the previous one was a licensed dev or early release version).
My code, Node version, devDependencies and versions were identical.
I am using node/gulp to run/build my projects. Accross those projects my gulpfiles look very similar. Since I'm coming from a Java/Maven background I was looking for sth. like a parent gulpfile one could inherit basic tasks from (this is easily possible with a parent pom.xml in maven).
Is this somehow build into gulp, are there modules doing this or do I need to figure this myself?
I could think of having a node module doing nothing else then providing basic gulp tasks that one can require from his dependent gulp file. Any experiences on an approach like this?
BR
Chris
You could just export the gulp object in your parent gulpfile and then require it in the child gulpfiles:
project/gulpfile.js:
var gulp = require('gulp');
gulp.task('commontask', function () { });
module.exports = gulp;
project/subproject/gulpfile.js:
var gulp = require('../gulpfile.js');
gulp.task('subtask', [ 'commontask' ], function() { });
Running subtask from the project/subproject directory:
> gulp subtask
[12:38:05] Using gulpfile ~/project/subproject/gulpfile.js
[12:38:05] Starting 'commontask'...
[12:38:05] Finished 'commontask' after 50 μs
[12:38:05] Starting 'subtask'...
[12:38:05] Finished 'subtask' after 20 μs
EDIT: The above won't work if the parent gulpfile isn't part of the same package (e.g. my-app) but rather from another package that you depend on (e.g. my-common-tasks). The reason is that the way module loading in Node.js works, you end up with two instances of gulp: one in my-common-tasks and one in my-app. Your tasks will be defined in the instance from my-common-tasks, but the gulp CLI will look for the tasks in the instance from my-app.
Instead you have to pass the gulp instance from my-app to my-common-tasks:
my-common-tasks/gulpfile.js:
module.exports = function(gulp) {
gulp.task('common-task', function () { });
};
my-app/gulpfile.js:
var gulp = require('gulp');
require('my-common-tasks')(gulp);
gulp.task('sub-task', [ 'common-task' ], function() { });
I have a simple build step of my project where I mainly concatenate several files. The code looks like this:
var gulp = require('gulp');
var p = require('gulp-load-plugins')();
var srcDir = 'src/';
var src=[/*some files here*/];
var header='',footer='';
gulp.task('build',function(){
gulp.src(src,{cwd:srcDir})
.pipe(p.concat('sdk.js'))
.pipe(p.header(header))
.pipe(p.footer(footer))
.pipe(p.jshint())
.pipe(gulp.dest('dist/'));
});
gulp.task('watch',function(){
gulp.watch('src/**/*.js',['build']);
});
gulp.task('default',['build','watch']);
The first build task works as expected, with execution time about 550ms:
[gulp] Starting 'build'...
[gulp] Finished 'build' after 541 ms
However, when I change something in the src folder, the build task takes very little time, although I don't use any caching:
[gulp] Starting 'build'...
[gulp] Finished 'build' after 2.37 ms
What's more, the task has no effect - the dist directory doesn't change. I noticed, however, that the files update when I kill gulp and run it again. I don't know whether it's something with gulp or the file system itself I don't understand.
It turns out that the problem was not associated with gulp - actually it was a problem with my IDE, WebStorm. While the IDE should normally update the files automatically using the mechanism described in this comment to another question
(and it also did in my case not so long ago...). Otherwise it falls back to checking all the files at a time interval. The file was not being updated in my IDE view, but it was already changed by gulp, which worked all the time. Until I fix the issue with automatic reloading, using File | Synchronize results in the up-to-date version of the file being shown.