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?
Related
I'm currently trying to optimize my website and I would like to know if there is a package that would automatically merge every css file and send only parts that are required for the site.
Is there anything similar to my idea?
You should probably go ahead with Gulp or Grunt , I prefer Gulp and you can follow this way
More details cab be found here https://gulpjs.com/
Create A Gulp Task
Then Execute the task by referring the name (This would create the merged css in the build/css folder)
var less = require('gulp-less');
var minifyCSS = require('gulp-csso');
var concat = require('gulp-concat');
gulp.task('css', function(){
return gulp.src('client/css/*.css')
.pipe(less())
.pipe(minifyCSS())
.pipe(gulp.dest('build/css'))
});
gulp.task('default', [ 'css' ]);
I'm trying to use gulp-elm with a monolithic architecture. I have setup my project dir with client and server directories and I've put my gulp file in the main directory. The directory structure is pretty simple.
project/
gulpfile.js
package.json
client/
elm-package.json
server/
...
When i run, for example,
gulp elm-init
with the following task:
// File paths
var paths = {
dest: 'client/dist',
elm: 'client/src/*.elm',
static: 'client/src/*.{html,css}'
};
// Init Elm
gulp.task('elm-init', function(){
return elm.init({ cwd : 'client' });
});
// Compile Elm to HTML
/*gulp.task('elm', ['elm-init'], function(){
return gulp.src(paths.elm)
.pipe(plumber())
.pipe(elm({ cwd : 'client' }))
.pipe(gulp.dest(paths.dest));
});*/
the elm-stuff folder and elm-package.json get moved to the main project directory. Is this expected? if not, is there a correct way to use a gulpfile from the parent directory to build an elm package in a nested directory? I think my effort matches the example.
gulp.task('init-nested', function(){
return elm.init({cwd: 'elm/nested-elm/'});
});
gulp.task('nested', ['init-nested'], function(){
return gulp.src('elm/nested-elm/*.elm')
.pipe(elm.make({filetype: 'html', cwd: 'elm/nested-elm/'}))
.pipe(gulp.dest('dest/'));
});
I've tried looking at the source, as well as following dependencies to see if i could figure it out myself, but i'm relatively unfamiliar with node so it's hard for me to figure out exactly what's going on in the gulp-elm source (as well as one of the deps i checked out.)
I was using this tutorial by Auth0 which had an old version of gulp-elm in package.json. Ugh!
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'm building a frontend workflow with gulp where i need to be able to build multiple separate designs but they need to share some common settings.
To clarify, i have a structure like this:
[Project root]
Templates
Designs
MyDesign1
Assets
js
.js
scss
.scss
gulpfile.js
MyDesign2
Assets
js
.js
scss
.scss
gulpfile.js
[More designs can be added later]
.eslintrc (Shared)
sftp-config.json (Shared)
I'd like to be able to call gulp in templates/designs/mydesign1 or templates/designs/mydesign2 and have acess to the data inside [Project root]/sftp-config.json and [Project root]/.eslintrc and any other file that might exist outside of the folder that gulp was run from.
Is that possible?
I found a solution to my problem, and it seems to work pretty well for my needs:
By using process.cwd() i can get the folder that gulp ran in, and then i can use path.resolve('../') to step back in my folders until i hit my project root folder.
var gulpRanInThisFolder = process.cwd();
var rootDir = path.resolve('../','../','../','../');
var designFolderName = pkg.name;
var sftpConfigPath = path.join(rootDir, '/sftp-config.json');
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