I want to split a large gruntfile in smaller pieces and came about these articles:
https://github.com/firstandthird/load-grunt-config
http://ericnish.io/blog/how-to-neatly-separate-grunt-files/
However, it seems I'm missing something obvious. When I issue a "grunt testtask" the task is not found. I'm doing something very wrong, obviously, but I don't get it.
Here's the content of the files, stripped down as much as possible:
gruntfile.js:
module.exports = function(grunt) {
var path = require('path');
require('load-grunt-config')(grunt, {
configPath: path.join(process.cwd(), 'grunt3'),
init: true
});
};
grunt3/testtask.js:
module.exports = {
copy: {
main:
{
files:
[{
src: "test1.txt",
dest: "test2.txt"
}]
}
}
};
I added an aliases file:
module.exports = {
'default': [],
'mytesttask': [
'testtask'
]
};
default is found. For mytesttalk I get "testtask not found".
Shouldn't aliases.js do a registerTask either for the filename (testtask) or for "copy" (I also tried using 'copy' as the target task)?
There is a config object named "testtask" according to --config-debug.
What am I missing here?
Thanks.
Addendum: found this very simple and straight-forward article on the same subject which shows how to simplify even further. Just, again, it's not working. The task specified in aliases is not found. e.g. 'mytesttask': [ 'testtask'] -> testtask is not found, although there is a grunt/testtask.js file that contains the task from the original gruntfile. What am I missing?
With the help of this excellent article http://mattbailey.io/a-beginners-guide-to-grunt-redux.html and one of the authors of that module commenting on github I finally found the flaw in my thinking. The files are not organized by tasks or targets but by grunt modules. So, you have to name them copy.js (from grunt-contrib-copy), cssmin.js (from grunt-contrib-cssmin), concat.js (from grunt-contrib-concat) und put the various targets in these files. Not the other way around (as I thought). Maybe that's clear for others from the documentation, it wasn't for me. That article by Matt Bailey is really great as it shows only what is really necessary. The article by Eric Nishio I referenced above is unnecessarily complex as it doesn't account for the aliases file.
Related
Last time i found in my project problem with circular dependencies. I resolve my problem but, i would like avoid this in future.
I think about plugin which found circular dependencies in my all project and give me feedback.
Example:
File a.js:
var functionFromA= require("./b.js");
console.log("file a", functionFromA);
module.exports = {functionFromA: functionFromA};
File b.js:
var functionFromB = require("./c.js");
console.log("file b", functionFromB );
module.exports = {functionFromB : functionFromB };
File c.js:
var functionFromC = require("./a.js");
console.log("file c", functionFromC );
module.exports = {functionFromC : functionFromC }
When i run file a.js i see in console:
file c {}
file b { functionFromC: {} }
file a { functionFromB: { functionFromC: {} } }
I found "Circular Dependency Plugin" in npm but i don't know how use it?
May be someone has similar problem and found a solution?
You can find this other tool useful: https://www.npmjs.com/package/madge
is very easy to use: madge --circular [directory] give you a list of circular dependencies in your code located inside [directory]. It can also generate a graph image.
As davidmpaz suggested, madge is a good tool for such a thing but it only detects circular dependencies and doesn't indicate whether these circular dependencies causes a problem in your application or not.
I made a tool to detect the circular dependencies and it warns you about the problem that caused by cd.
https://www.npmjs.com/package/detect-circular-deps
If you have eslint setup, you can add eslint-plugin-import and enable the import/no-cycle rule.
Can someone maybe explain me, how this build-time require works?
https://github.com/kriasoft/react-starter-kit/blob/feature/redux/src/server.js#L89
They are requiring a jade template, which package or configuration allows this, I seem unable to find it myself.
const template = require('./views/index.jade')
I think is much more elegant then:
import jade from 'jade'
const template = jade.compile('./views/index.jade')
As RGraham mentioned in his comment, the require call is being "intercepted" during webpack's compilation of the application bundle. This is done using "loaders" that define particular behaviour for imports of a particular type:
Loaders allow you to preprocess files as you require() or “load” them.
In this particular case, the loader that does this modification could be one of these (or another that I didn't find in my search):
https://github.com/bline/jade-html-loader
https://github.com/webpack/jade-loader
Edit: looking at the project's own webpack configuration we can see it is the second link above:
{
test: /\.jade$/,
loader: 'jade-loader',
}
jade-loader reads the content of the specified file, which make look something like this (Jade string):
h1 Hello, #{author}!
..and replaces that with a CommonJS JavaScript code similar to this (at compile time):
module.exports = function(data) {
return `<h1>Hello, ${data.name}</h1>`;
};
I'm trying to use broccoli-config-replace unsuccessfully. What I would like to do is replacing a placeholder in my index.html and see it in the browser by executing broccoli serve
The interesting part of my Brocfile.js is this one:
var index_html = new ConfigReplace(app, './', {
// A list of files to parse:
files: [
'index.html',
],
configPath: 'replacements.json',
outputPath: 'production/',
patterns: [{
match: /\{\{SRC_REQUIRE\}\}/g,
replacement: function(config) { return config.SRC_REQUIRE; }
}]
});
module.exports = index_html;
but when I run broccoli serve what I get is this warning and nothing appears by pointing my browser to localhost:4200:
$ broccoli serve
Serving on http://localhost:4200
Warning: failed to stat tmp/config_replace-input_base_path-5qF5n457.tmp/1/tmp/config_replace-input_base_path-5qF5n457.tmp/1/tmp/config_replace-input_base_path-5qF5n457.tmp/1/tmp/config_replace-input_base_path-5qF5n457.tmp/1/tmp/config_replace-input_base_path-5qF5n457.tmp/1/tmp/config_replace-input_base_path-5qF5n457.tmp/1/tmp/config_replace-input_base_path-5qF5n457.tmp/1/tmp/config_replace-input_base_path-5qF5n457.tmp/1/tmp/config_replace-input_base_path-5qF5n457.tmp/1/tmp/config_replace-input_base_path-5qF5n457.tmp/1/tmp/config_replace-input_base_path-5qF5n457.tmp/1/tmp/config_replace-input_base_path-5qF5n457.tmp/1/tmp/config_replace-input_base_path-5qF5n457.tmp/1/tmp/config_replace-input_base_path-5qF5n457.tmp/1/tmp/config_replace-input_base_path-5qF5n457.tmp/1/tmp/config_replace-input_base_path-5qF5n457.tmp/1/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/regenerator/node_modules/defs/node_modules/yargs/node_modules/cliui/node_modules/center-align/node_modules/align-text/node_modules/kind-of/README.md
Segmentation fault: 11
nice segfault huh? I guess what I've written is not that OK, but the documentation is very lacking. Can anybody suggest me the right configuration to accomplish this simple task? Thank you
I've figured out how to get what I want, but I think the plugin still needs some development. Here is the right configuration:
var index_html = new ConfigReplace(appHtml, 'conf', {
// A list of files to parse:
files: [
'/production/index.html'
],
configPath: 'replacements.json',
patterns: [{
match: /\{\{SRC_REQUIRE\}\}/g,
replacement: function(config) { return config.SRC_REQUIRE; }
}]
});
Some facts I've noted:
The configuration node must be a directory. Root is not allowed, so I had to place my replacements.json in a subfolder (/conf)
The outputPath option seems not to be considered. I omitted it and used a pickFile before in order to create a tree with the right structure I wanted. Then I passed the tree to ConfigReplace (the appHtml you see in the configuration I pasted above)
Lack of documentation is a bad pal for adopting broccoli happily. I'm confident though.
Setup:
A Gruntfile with the following task:
concat: {
build: {
files: {
'build/app.js': [
'src/.js',
'src//.js',
'!src/vendors/'
],
}
}
A lot of angular modules, with its controllers, services, and so on, with a structure like this:
a/
a.js // Module declaration like: angular.module('a',[])
a-controller.ks // Which sets a controller in its root module definition like: angular.module('a').controller()...
Issue:
The task concatenates all the js files it finds in the build folder to a single app.js file, and it does this fine, but messes up with the order of files when concatenating.
For instance, it concatenates first the controller file instead of the main folder file containing the module declaration, triggering the following error:
Module xxxx not available!
I suppose the issue lies in the way concat builds up the files and that is done by the grunt core and specifically the minimatch library, and the possibility it treats dashes to be first than letters, but I don't know how configure to change that behavior, and even know if that is possible.
Question:
So, the question is: How can I make Grunt/Grunt-concat to process dashed f first than the others in the same folder so the ordering is maintained?
Thanks
Update 1:
After digging more, It seems that it has nothing to do with the ordering inside a folder, but Grunt/Core sending the root files to the end and putting them the leaf ones first.
Just specify the order you want to concat your files, placing them in order, what I mean is, first add your single files that should be concatenated at start, after your full folder that does not need to have an order, and finally your final files, something rougth like this:
grunt.initConfig({
concat: {
js: {
src: ['lib/before.js', 'lib/*', 'lib/after.js'],
dest: 'bundle.js',
}
}
});
You will have to specify to the grunt-concat task the order you want your files built. For my projects, I typically keep a folder structure where controllers go in a app/controllers folder, services in services, and etc, but names can vary. I also keep an app.js that declares my app module and specifies the config handler for it. I use a config like this for grunt-uglify but the same can be done for concat with little to no changes:
uglify: {
development: {
files: {
'public/scripts/app.js': [
'public/app/app.js',
'public/app/controllers/*.js',
'public/app/directives/*.js',
'public/app/services/*.js'
]
}
}
}
I just copy paste my answer, the detail you want on second picture, i hope help you.
you may consider this solution
Separate the module declaration to xxx.module.js
In grunt-contrib-concat modify the config like below :
place this outside grunt.initConfig
var clientApp = './app/';
grunt-contrib-concat config
dist: {// grab module first, state the second
src: [
clientApp+'**/*-controller.js',
clientApp+'**/*.module.js',
clientApp+'**/*.state.js',
clientApp+'**/*.js'
],
dest: 'dist/<%= pkg.name %>.js'
}
i use state to so i have to define state too before trying to navigate to any state. This is preview my code, the module declaration is declared fist before anything, then my state. even minified doesnt create any problem.
I hope this help you.
i follow this johnpapa's style guide, your problem might solve there if my solution not work
I tried to create a gulpfile.js for my personal website project. I've never done this before but with a little 'trial and error' it now works in an acceptable way.
The only thing that doesn't work even after 1000 modifications is simple copying files and folders.
var files = {
data_src : [
'./files.json',
'data/**/*.*'
],
distribution_dest : '_distribution'
};
gulp.task('copy-data', function() {
gulp.src(files.data_src, { base: './' })
.pipe(gulp.dest(files.distribution_dest))
.pipe(notify({message: 'Data copied for distribution!'}));
});
This should copy all sub-folders and files to the gulp.dest. But it copies only half of them, some folders will be ignored even if I change their names etc. (no special characters, same subfolder structure as the once that got copied correctly ...) - nothing worked. I just can't see any pattern in this.
There is no error message while running gulp. Nothing that would help me find the error.
Why are some folders or files excluded from copying?
I use base to keep the folder / sub-folder structure; tried with and without 'base' -> no effects on the copying process.
I also changed the position of the 'copy-data' task in the run-list. Actually it's the first task to run. There seems to be no change in behavior no matter if it's the first or the last one.
gulp.task('default', function() {
gulp.run('copy-data', 'custom-sass', 'framework-sass', 'custom-js', 'framework-js', 'replace-tags', 'browser-sync');
... some watches ...
});
The structure of the data folder looks like these:
./data
|-doc
|---content
|---template
|-img
|---chart
|---icon
|---logo
|---pattern
|---people
|---photo
|---symbol
|-----brandklassen
|-----brandschutzzeichen
|-----gebotszeichen
|-----gefahrensymbole
|-----rettungszeichen
|-----verbotszeichen
|-----verkehrsrechtzeichen
|-----warnzeichen
|---wallpaper
/data/doc and all subfolders are ok.
/data/img/chart to /data/img/people are also ok.
Within /data/img/photo only 14 out of 21 images are copied.
/data/img/symbol with sub-folders and /data/img/wallpaper were ignored completely.
SOLVED IT MYSELF! The problem was caused by async operating tasks. Adding a return forced gulp to complete the copying process before continuing!
gulp.task('copy-data', function() {
return gulp.src(files.data_src, { base: './' })
.pipe(gulp.dest(files.distribution_dest))
.pipe(notify({message: 'Data copied for distribution!'}))
});
Now all images will be copied!