We Keep Coding

Let Gulp merge/resolve require js files

I have a main.js file with some code and a couple of require('some_other_file.js'); lines in them (which in turn might require some other files).
The Requirement: Using Gulp 4.0, I would like to merge all these files together into one file by just supplying the main.js file as source and let some Gulp plugin figure out which other files need to be included as well (so not just simply using a combine on all the files!).
Using requirejs in gulp simply adds the require(...); lines to the output file.
gulp.task('compile_js', function(cb) {
var config = {
baseUrl: './src/js/',
include: ['main'],
out: './dist/main.js',
};
rjs.optimize(config, function(buildResponse){
console.log('build response', buildResponse);
cb();
}, cb);
});
Am I doing it wrong with requirejs or is there a Gulp plugin that can handle this?

Found it! Browserify seems to do the trick.
Browserify: http://browserify.org/
And an implementation in Gulp: https://github.com/gulpjs/gulp/blob/master/docs/recipes/browserify-uglify-sourcemap.md

Grunt read .json file to concat list of html files

I’m trying to get grunt to concat some .css files from 2 different directories into a single css file
I got it working ok and am trying to write a similar piece of code to concat html files in the order I specify in a simple external .json file rather than editing the Grunfile.js directly each time but it keeps throwing errors
The file locations and permissions are all ok, I can do it with php or concat the css files ok, I’m not great on js syntax os using functions. I only learned to use Grunt in the last few days so am pretty sure have not called the file with the correct code??
Any advice kindly appreciated!
This is my Gruntfile.js exactly
module.exports = function(grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
// 2. Configuration for concatinating files goes here
file.readJSON(‘html-files.json’);
},
watch: {
files: ['../../pages/**/*.html’],
tasks: ['concat'],
options : { nospawn : true }
}
});
// 3. Where we tell Grunt we plan to use this plug-in
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['concat']);
};
This is the html-files.json file contents exactly
html: {
src: [
'../../pages/**/this-block.html',
'../../pages/**/that-block.html',
],
dest: '../../somepage/content.html',
}

Angularjs (Error: $injector:modulerr Module Error) on concatenating bower components?

When i'm concatenating bower_components of angularjs (angular & ui-router) using grunt,
I get a (Error: $injector:modulerr Module Error) Complete error here https://goo.gl/0yz6pm
on the built script.
I DO NOT get this error when i'm using the script source directly from the bower_components
Therefore i think it's an issue with concatenation by grunt.
Below is the grunt script,
grunt.initConfig({
concat:{
options: {
},
dist: {
// the files to concatenate
src: ['client/bower_components/angular/angular.min.js','client/bower_components/angular-ui-router/release/angular-ui-router.min.js'],
// the location of the resulting JS file
dest: 'client/bower_components/../assets/scripts/coreScript.js',
nonull: true
}
}
})
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('build',['concat']);
}
I've also tried using a seperator:';' in options but to no help.
What can i do to make concatenation work here?

This setup looks fine, assuming all those script references are correct and you are referencing coreScript.js on your page. The only issue I can see here is your call to .registerTask. Observe your implementation
grunt.registerTask('build','concat']);
However, grunt is expecting a task array
grunt.registerTask('build', ['concat']); // close array with [
Could it be this task is not successfully running because of this issue? I am also not seeing a call to readJSON. Could you be also missing the following in your gruntfile.js declaration?
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
// ...
}
});

Development mode for AngularJS using GruntJS

I have a couple of products that started off with the yeoman angular generator, and it has been a pretty good dev setup. One thing I haven't been able to find a good solution for is setting a development/production mode flag.
Naturally we use a few tools that we only want on in production so having prod/dev variable that we can use both inline JavaScript and/or HTML files would be quite useful. I searched for solutions online before but haven't found anything useful.
Ultimately, I'm looking for a good solution to use in an AngularJS setting, ideally set via grunt serve and/or build run. What are other teams doing here?

I'm using ng-constant. It creates a .js file which contains some angular constants of your choice.
grunt.initConfig({
...
ngconstant: {
options: {
name: 'config',
dest: '<%= yeoman.app %>/scripts/config.js'
},
development: {
constants: {
myVariable: 'it is development'
}
},
production: {
constants: {
myVariable: 'it is production'
}
}
}
});
And then just add it to your tasks:
grunt.registerTask('serve', [
...
'ngconstant:development',
...
]);
And don't forget to include this /scripts/config.js file in your html and inject 'config' into your app.
var app = angular.module('myApp', [
'config',
...
]);

Grunt - Dynamically Set Config Before Running a Task

So here is my hypothetical config object for a hypothetical fooTask that does something (not relevant to question) to a bunch of JS files
grunt.initConfig({
fooTask: {
app1: 'app1/*.js',
app2: 'app2/*.js',
app3: 'app3/*.js'
}
});
As you can see, with this approach, I have to run fooTask 3 times with each app specified as a target:
grunt fooTask:app1
grunt fooTask:app2
grunt fooTask:app3
Needless to say this does not scale as either the number of apps increase or the number of such foo tasks increase as one has to C&P the same code over and over for each app.
So ideally what I would like to define is just one target with the name of the app passed in as a config variable
grunt.initConfig({
fooTask: {
dist: '<%=appName%>/*.js'
}
});
I would then like to call fooTask 3 times, one for each app, with the right app set as appName
var apps = ['app1', 'app2', 'app3'];
apps.forEach(function(app) {
var currAppName = app;
// Run fooTask but how do I specify the new currAppName config?
grunt.task.run('fooTask');
});
As from code above, I know I can run my fooTask using grunt.task.run but how do I set the appName config for my task?
Note that this question is similar to this other one that also does not have the right answer yet - Pass Grunt config options from task.run
Thanks a lot.

EDIT 2:
So nevermind the garbage below the first edit, leaving as example of what doesn't work. In my case it was really important to be able to set the value within a task at run-time so I settled on the file system. Perhaps it suits your needs.
grunt.initConfig({
someTask: {
someKey: fs.readFileSync('file.txt', { encoding: 'utf8' })
}
});
of course you can do the readFile outside of the task if you need a bunch of different app names.
EDIT:
Hmmm. I swear I had this working when I wrote this...but now it is not. Grunt just sees the extra arguments as additional unfound tasks.
I was trying to figure this out myself, finally a "duh" just moment happened - why not parse process.argv before grunt.initConfig?
module.exports = function(grunt) {
var sourcefile = process.argv[2] || 'default.js'; // <- this
grunt.initConfig({
uglify: {
main: {
src: sourcefile, // <- voila :)
dest: sourcefile.substring(0, sourcefile.length-3) + '.min.js'
}
}
});
grunt.loadNpmTasks('uglify');
grunt.registerTask('default', ['uglify']);
};
and use from command line:
grunt mykillerscript.js
I didn't even try to use grunt.option for the same reason that all the examples only showed directing which task is run, but I wouldn't be surprised if there is a more "grunt" way to do this.