I want Gulp to load and run a task that is in a different folder.
For example:
files tree:
root
lib
task.js
proj
gulpfile.js
task.js:
var gulp = require('gulp');
gulp.task('myTask', function() {
console.log('done!');
});
and gulpfile.js:
var gulp = require('gulp');
gulp.task('default', ['myTask']);
What I've tried so far:
require('../lib/task.js')
require('require-dir')('../lib/')
In both cases I can see task.js is loaded, but I get the following error:
Task 'myTask' is not in your gulpfile
When task.js is in the proj folder or in a sub folder of it - it works fine,
so I think it has something to do about going up to the parent folder through "../" .
Why is this happening and what can be done?
you can use NodeJS's global or module.exports for this purpose.
http://www.hacksparrow.com/global-variables-in-node-js.html
Related
I am new to gulp and want to use it to convert SASS to CSS. I have a src folder which has some scss files deep inside, and I want to mirror it to the public folder but as css files. This it the gulp code
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('styles', function() {
gulp.src('src/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./public/'))
});
//Watch task
gulp.task('default',function() {
gulp.watch('src/**/*.scss',['styles']);
});
but when I run node gulp the program just ends without any error or messages. Shouldn't it stay running to do te file listening (i.e. watch)? Also when I edit a .scss file, it does not create a public folder with the .css file.
Thanks
You need to run gulp no node gulp
You also need to add the styles task in the default one.
gulp.task('watch', function() {
gulp.watch('src/**/*.scss',['styles']);
});
gulp.task('default', ['watch', 'styles'])
new to node.js, trying to use gulp. I got this error:
Task 'styles' is not in your gulpfile
I see it is a very common error, what can cause it?
This is my code.
Both auto-prefixer and gulp are in my package.json file
the file name is autoprefixer.js
var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
gulp.task('styles',function(){
return gulp.src('css/style.css')
.pipe(autoprefixer())
.pipe(gulp.dest('build'))
});
what can be the problem?
I found out my problem... the file name was autoprefixer.js and not gulpfile.js as it should be. once I changed the file name everything worked great.
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() { });
To make my gulpfile.js easier to read, I put all of my gulp tasks in a gulp/ directory. The only thing I now do in my gulpfile.js is require in the whole directory like this:
var requireDir = require('require-dir');
requireDir('./gulp');
An example task file is `default.js'
gulp.task('default', function() {
// Do stuff here
});
I now use the same gulp stuff in multiple projects, so I create a npm module and packaged all of my gulp tasks into it. When I try to change my gulpfile.js to point at the directory with the same contenxt in node_modules like this:
var requireDir = require('require-dir');
requireDir('./node_modules/my-gulp/gulp');
it doesn't find any of my tasks. It is the same directory as before, so why won't it work? What can I do to pull in multiple gulp tasks in this manner?
Here's the initial directory structure:
./src
./src/test.html
./gulpfile.js
The goal is simply to copy "src/test.html" to "build/index.html". I'm using the base base option in order to maintain the directory structure relative to src/ within the build/ dir.
Here's gulpfile.js
var gulp = require('gulp');
var replace = require('gulp-replace');
gulp.task('default', function() {
return gulp.src(['test.html'], {base: './src'})
.pipe(gulp.dest('build'));
});
When I run gulp, I get no errors.
$ gulp
[15:26:24] Using gulpfile /tmp/testproject/gulpfile.js
[15:26:24] Starting 'default'...
[15:26:24] Finished 'default' after 8.02 ms
However, it did not create the build directory:
$ find .
.
./src
./src/test.html
./gulpfile.js
Amy I missing something here?
gulp.src is searching the file in the folder where the gulpfile.js is.
You should change your task to :
gulp.task('default', function() {
return gulp.src(['src/test.html'], {base: 'src'})
.pipe(gulp.dest('build'));
});
The base parameter is used by gulp.src for calculating the relative paths it has to put in the output stream not for setting its "current" folder for reading the files.