Develop Reference

How to expose a dependency when writing a grunt module

I'm building a module grunt-foo which is utilizing grunt-galvanize (e.g. its in my package.json as a dependency). Something like this:
module.exports = function(grunt) {
require('load-grunt-tasks')(grunt)
grunt.registerMultiTask('foo', 'do your foo', function() {
grunt.task.run('bar');
});
grunt.registerTask('bar', function() {
// Add some galvanize configs
grunt.option('galvanizeConfig', { configs: { ... } });
grunt.task.run(['galvanize:baz'])
});
grunt.registerTask('baz', function() { grunt.log.ok('baz'); });
};
However, when I utilize this grunt module in an app and run grunt foo I get something like Warning: Task "galvanize:baz" not found. Use --force to continue.
I'm looking for a solution that does not involve my having to install grunt-galvanize as a dependency (dev or otherwise) within the apps that will utilize my grunt module.

Require another file in gulpfile (which isn't in node_modules)

I've been using gulp for a while now and know how to import another node module, e.g.
var sass = require('gulp-sass');
That's fine, but my gulpfile is filling up with code that I'd like to move into a separate file and "require". Specifically I am writing a postcss plugin, which I already have working when declared as a function inside of the gulpfile. My question is how to put my function in an external file and require it like I do a node module. Do I need to "export" the function in the file being required? Do I need to use ES6 modules or something like that?
As an aside, I realise that if i was doing this probably I would either (A) turn this into a proper node module and put it on a private NPM repository, but that seems unnecessary, or (B) turn it into a proper gulp plugin, but that would require learning how to author a gulp plugin and learning about streams and stuff. Both of these are probably better but would take more time so I've decided to just keep the function simple and local for now.

First create a new js file (here ./lib/myModule.js):
//./lib/myModule.js
module.exports = {
fn1: function() { /**/ },
fn2: function() { /**/ },
}
You could also pass some arguments to your module:
// ./lib/myAwesomeModule.js
var fn1 = function() {
}
module.exports = function(args) {
fn1: fn1,
fn2: function() {
// do something with the args variable
},
}
Then require it in your gulpfile:
//gulpfile.js
var myModule = require('./lib/myModule')
// Note: here you required and call the function with some parameters
var myAwesomeModule = require('./lib/myAwesomeModule')({
super: "duper",
env: "development"
});
// you could also have done
/*
var myAwesomeModuleRequire = require('./lib/myAwesomeModule')
var myAwesomeModule = myAwesomeModuleRequire({
super: "duper",
env: "development"
});
*/
gulp.task('test', function() {
gulp.src()
.pipe(myModule.fn1)
.pipe(myAwesomeModule.fn1)
.gulp.dest()
}

First, you have to add export default <nameOfYourFile> at the end of your file
Then to use it, write import gulp from 'gulp'
If you have an error message, install babel-core and babel-preset-es2015 with NPM, and add a preset "presets": ["es2015"] in your .babelrc config file.

I fix my problem by install:
npm i babel-plugin-add-module-exports
Then i add "plugins": [["add-module-exports"]] to the .babelrc

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 task dependency

I would like to run (and complete) my "clean" task before running the rest of my build task.
This currently works, although "run" is deprecated and I'd like to replace it:
gulp.task('build', ['clean'],function() {
gulp.run(['styles-nomaps','usemin','scripts','assets']);
});
What's the proper syntax?

You can use the run-sequence plugin.

You can use rimraf util to clean files, it can be run in sync mode:
clean.js:
var gulp = require('gulp');
var rimraf = require('rimraf');
gulp.task('clean', function(cb) {
rimraf.sync(paths.assets, cb); // Make sure you pass callback
});

Using node.js functions in gulp task

I'm looking to integrate more-css(https://github.com/army8735/more) into my gulp workflow. I've tried several different options. I'm not sure what the syntax to include a function of this type would be. Could someone clarify?
gulp.task('more-css', function () {
var moreCss = require('more-css');
return gulp.src('./in')
.pipe(moreCss.compress('paint.css', true))
.pipe(gulp.dest('./out'));
});

#Pradyumna's answer is not correct; gulp plugins are basically transform streams. It's not enough to use the node API directly, you have to wrap it in some streaming logic. Having had a brief look around on npm, there isn't a gulp plugin that you can use for more-css, so I made one. Install with:
npm install gulp-more-css --save-dev
And a code example:
var gulp = require('gulp');
var moreCSS = require('gulp-more-css');
gulp.task('default', function() {
return gulp.src('./in')
.pipe(moreCSS())
.pipe(gulp.dest('./out'));
});
https://github.com/ben-eb/gulp-more-css

var moreCss=require('more-css');
gulp.task('build', function(){
var cssFile='paint.css';//path to paint.css
gulp.src(cssFile)
.pipe(moreCss.compress(gulp.src(cssFile), true))
.pipe(gulp.dest('./out'));
});