Develop Reference

Grunt tasks stuck in endless loop

Working on putting together a base Gruntfile.js for some upcoming projects. Starting in on a new computer so everything has been a fresh build. Installed Node and NPM using Homebrew, and then installed Grunt globally, as well as in my local directory.
Here is my package.json:
{
"name": "timespent-prototype",
"version": "0.1.0",
"devDependencies": {
"assemble": "0.4.37",
"bower": "^1.4.1",
"grunt": "^0.4.5",
"grunt-contrib-concat": "^0.5.1",
"grunt-contrib-sass": "^0.9.2",
"grunt-contrib-watch": "^0.6.1",
"grunt-newer": "^1.1.0",
"grunt-wiredep": "^2.0.0"
}
}
And here is my Gruntfile.js:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
vendor: {
src: ['vendor/**/*.min.js'],
dest: 'build/javascripts/library.js',
}
},
// Takes your scss files and compiles them to css
sass: {
dist: {
options: {
style: 'expanded'
},
files: {
'build/stylesheets/application.css': 'app/stylesheets/application/index.scss'
}
}
},
// Assembles your templates into HTML files
assemble: {
options: {
layoutdir: 'app/views/layouts/',
partials: ['app/views/partials/*.hbs'],
flatten: true,
expand: true
},
pages: {
src: ['app/views/**/*.hbs','!app/views/layouts/*.hbs','!app/views/partials/*.hbs'],
dest: 'build/'
}
},
wiredep: {
task: {
src: ['app/views/layouts/*.hbs']
}
},
// Watches for file changes, runs the default task
watch: {
files: ['app/**/*'],
tasks: ['default'],
options: {
// Start another live reload server on port 1337
livereload: 1337,
}
}
});
// Load the plugins
grunt.loadNpmTasks('assemble');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-newer');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-wiredep');
// Register the tasks
grunt.registerTask('default', ['sass','assemble']);
grunt.registerTask('watch', ['watch']);
grunt.registerTask('concat', ['concat']);
grunt.registerTask('wiredep', ['wiredep']);
};
The problem that I am seeing is that with multiple tasks, here specifically with wiredep and concat, the task gets stuck in a loop and never ends. Running grunt concat with verbose outputs like this:
Registering "grunt-contrib-concat" local Npm module tasks.
Reading /Users/jacksonlynch/projects/timespent-prototype/node_modules/grunt-contrib-concat/package.json...OK
Parsing /Users/jacksonlynch/projects/timespent-prototype/node_modules/grunt-contrib-concat/package.json...OK
Loading "concat.js" tasks...OK
+ concat
Running tasks: concat
Running "concat" task
Running "concat" task
Running "concat" task
Running "concat" task
Running "concat" task
Running "concat" task
Where Running "concat" task will continue to print until I stop it. As I am seeing this with multiple plugins and tasks this might be a problem with my installation of NPM or Grunt, but I'm having a very hard time debugging this. If anyone has run into this before, please let me know what helped!
Thanks!
Edit: in response to Alireza Ahmadi's comment, here is my file structure:
.
|
|_ app/
|_ assets/
|_ javascript/
|_ stylesheets/
|_ views/
|
|_ build/
|_stylesheets/
|_javascripts/
|
|_ vendor/
|_ bower.json
|_ Gruntfile.js
|_ package.json

In the last 2 lines of your Gruntfile.js you have redeclared the concat and wiredep tasks and when grunt tries to run your code, It stuck in an endless loop because concat refers to an undefined concat task, So you should remove these lines:
grunt.registerTask('concat', ['concat']);
grunt.registerTask('wiredep', ['wiredep']);
In general, When you define a task named foobar with grunt.initConfig, It's defined and does not need to registered using registerTask and it can be accessible by grunt foobar command.

How to tell Lineman to copy all files from /dist to a different directory?

When I run lineman build it generates all the minified CSS and JS in the /dist directory. I can't figure out how to make it copy those minified files into a different directory( My Public Directory at path - ../lib/app/public).
My Lineman configuration file looks like this.
# Exports an object that defines
# all of the configuration needed by the projects'
# depended-on grunt tasks.
#
# You can familiarize yourself with all of Lineman's defaults by checking out the parent file:
# https://github.com/testdouble/lineman/blob/master/config/application.coffee
#
module.exports = require(process.env['LINEMAN_MAIN']).config.extend('application', {
removeTasks:
common: [ "webfonts:dev", "images:dev"]
dist: ["images:dist", "webfonts:dist", "pages:dist"]
server:
apiProxy:
enabled: true
host: 'localhost'
port: 4567
# enableSass: true
# configure lineman to load additional angular related npm tasks
loadNpmTasks: [ "grunt-ngmin"]
# task override configuration
prependTasks:
dist: ["ngmin"] # ngmin should run in dist only
watch:
scripts:
files: ["generated/**"],
tasks: ['copy:dev']
copy:
dev:
files: [expand: true, cwd: 'generated', src: ['css/**', 'js/**', '!**/spec.js',
'!**/*.less*', '!**/*.coffee*', '!**/*.*.map'], dest: '../lib/app/public' ]
# configuration for grunt-ngmin, this happens _after_ concat once, which is the ngmin ideal :)
ngmin: {
js: {
src: "<%= files.js.concatenated %>",
dest: "<%= files.js.concatenated %>"
}
},
})
I know there is a copy:dist default task in Lineman but not sure how it works and can't understand it properly from the documentation at http://linemanjs.com/

I solved this problem, with Lineman's help:
Wrote a custom task, tasks/dl-dev-copy.js, to copy the files:
module.exports = function(grunt) {
return grunt.registerTask('dl-dev-copy', 'Copy UI artifacts to wildfly deployment folder', ['copy:dl-dev-copy']);
};
Updated the application.js file (the key part is important, I was only able to figure it out after the Lineman folks helped me out):
loadNpmTasks: lineman.config.application.loadNpmTasks.concat('grunt-contrib-copy'),
copy: {
'dl-dev-copy': {
files: [{
expand: true,
cwd: 'generated/',
src: ['**'],
dest: '../../../target/iq/'
}]
}
},
watch: {
target: {
"files": ["app/**/*", "spec/**/*", 'spec-e2e/**/*'],
"tasks": 'dl-dev-copy'
}
},
appendTasks: {
common: ["dl-dev-copy"]
}
See below for the output of lineman run (it is similar when a file is being watched changes, and we I run lineman build):
lineman run
Running "common" task
...
Running "copy:dl-dev-copy" (copy) task
Created 6 directories, copied 23 files
...
Running "watch" task
Waiting...

How to configure grunt copy task to exclude .js files from a subdirectory

I am using grunt-contrib-copy to copy folders and files from my src folder to build folder. But I want to exclude all .js files from the app subdirectory in my src directory.
This is my Gruntfile. But it is copying all .js files from the subdirectories in app directory instead of excluding. What changes should I make to make it work.
This is my grunt file:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// Task configuration.
concat: {
dist: {
src: ['src/app/**/*.js'],
dest: 'build/app.min.js'
}
},
copy: {
main: {
files: [
//includes files within path and its sub-directories
//{src: ['src/**', '!/src/app/**/*.js'], dest: 'build/', filter: 'isFile'}
{expand: true, src: ['src/**', '!/src/app/**/*.js'], dest: 'build/', filter: 'isFile'}
]
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.registerTask('default', ['concat', 'copy']);
};
Reference: Configure grunt copy task to exclude files/folders
Thanks.

Can you try to remove the first slash after the exclamation mark? So change this:
'!/src/app/**/*.js'
to this:
'!src/app/**/*.js'

CSSLint : How to config tasks just print error not warning

I'm new with Grunt - csslint plugin, after I run and cssLint task complete, there are many and many errors and warnings that I can't follow. So how to config task just print out the errors, not warning??

If you use grunt-contrib-csslint you can specify the options in a .csslintrc file.
From the grunt-contrib-csslint Readme:
Options
Any specified option will be passed through directly to csslint, thus
you can specify any option that csslint supports. The csslint API is a
bit awkward: For each rule, a value of false ignores the rule, a value
of 2 will set it to become an error. Otherwise all rules are
considered warnings.
Assuming you have a structure like this:
├── .csslintrc
├── Gruntfile.js
├── css
│   └── foo.css
├── node_modules
└── package.json
.csslintrc
{
"ignore": [
"adjoining-classes",
"box-model",
"box-sizing",
"bulletproof-font-face",
"compatible-vendor-prefixes",
"display-property-grouping",
"duplicate-background-images",
"duplicate-properties",
"empty-rules",
"fallback-colors",
"floats",
"font-faces",
"font-sizes",
"gradients",
"ids",
"import",
"import-ie-limit",
"important",
"known-properties",
"non-link-hover",
"order-alphabetical",
"outline-none",
"overqualified-elements",
"qualified-headings",
"regex-selectors",
"rules-count",
"selector-max",
"selector-max-approaching",
"selector-newline",
"shorthand",
"star-property-hack",
"text-indent",
"underscore-property-hack",
"unique-headings",
"universal-selector",
"unqualified-attributes",
"vendor-prefix",
"zero-units"
]
}
reference: https://github.com/CSSLint/csslint/wiki/Command-line-interface
Gruntfile
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
csslint: {
strict: {
src: ['css/*.css']
},
lax: {
options: {
csslintrc: '.csslintrc'
},
src: ['css/*.css']
}
}
});
grunt.loadNpmTasks('grunt-contrib-csslint');
grunt.registerTask('default', ['csslint:lax']);
};
Then grunt will report only errors and grunt csslint:strict will report warnings and errors.

How to concatenate and minify multiple CSS and JavaScript files with Grunt.js (0.3.x)

Note: This question is only relevant for Grunt 0.3.x and has been left for reference. For help with the latest Grunt 1.x release please see my comment below this question.
I'm currently trying to use Grunt.js to setup an automatic build process for first concatenating and then minifying CSS and JavaScript files.
I have been able to successfully concatenate and minify my JavaScript files, although each time I run grunt it seems to just append to the file instead of overwriting them.
As for the minifying or even concatenating CSS, I have been unable to do this as of yet!
In terms of grunt CSS modules I have tried using consolidate-css, grunt-css & cssmin but to no avail. Could not get my head around how to use them!
My directory structure is as follows (being a typical node.js application):
app.js
grunt.js
/public/index.html
/public/css/[various css files]
/public/js/[various javascript files]
Here is what my grunt.js file currently looks like in the root folder of my application:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: '<json:package.json>',
concat: {
dist: {
src: 'public/js/*.js',
dest: 'public/js/concat.js'
}
},
min: {
dist: {
src: 'public/js/concat.js',
dest: 'public/js/concat.min.js'
}
},
jshint: {
options: {
curly: true,
eqeqeq: true,
immed: true,
latedef: true,
newcap: true,
noarg: true,
sub: true,
undef: true,
boss: true,
eqnull: true,
node: true
},
globals: {
exports: true,
module: false
}
},
uglify: {}
});
// Default task.
grunt.registerTask('default', 'concat min');
};
So just to summarise I need help with two questions:
How to concatenate and minify all my css files under the folder /public/css/ into one file, say main.min.css
Why does grunt.js keep on appending to the concatenated and minified javascript files concat.js and concat.min.js under /public/js/ instead of overwriting them each time the command grunt is run?
Updated 5th of July 2016 - Upgrading from Grunt 0.3.x to Grunt 0.4.x or 1.x
Grunt.js has moved to a new structure in Grunt 0.4.x (the file is now called Gruntfile.js). Please see my open source project Grunt.js Skeleton for help with setting up a build process for Grunt 1.x.
Moving from Grunt 0.4.x to Grunt 1.x should not introduce many major changes.

concat.js is being included in the concat task's source files public/js/*.js. You could have a task that removes concat.js (if the file exists) before concatenating again, pass an array to explicitly define which files you want to concatenate and their order, or change the structure of your project.
If doing the latter, you could put all your sources under ./src and your built files under ./dest
src
├── css
│   ├── 1.css
│   ├── 2.css
│   └── 3.css
└── js
├── 1.js
├── 2.js
└── 3.js
Then set up your concat task
concat: {
js: {
src: 'src/js/*.js',
dest: 'dest/js/concat.js'
},
css: {
src: 'src/css/*.css',
dest: 'dest/css/concat.css'
}
},
Your min task
min: {
js: {
src: 'dest/js/concat.js',
dest: 'dest/js/concat.min.js'
}
},
The build-in min task uses UglifyJS, so you need a replacement. I found grunt-css to be pretty good. After installing it, load it into your grunt file
grunt.loadNpmTasks('grunt-css');
And then set it up
cssmin: {
css:{
src: 'dest/css/concat.css',
dest: 'dest/css/concat.min.css'
}
}
Notice that the usage is similar to the built-in min.
Change your default task to
grunt.registerTask('default', 'concat min cssmin');
Now, running grunt will produce the results you want.
dest
├── css
│   ├── concat.css
│   └── concat.min.css
└── js
├── concat.js
└── concat.min.js

I want to mention here a very, VERY, interesting technique that is being used in huge projects like jQuery and Modernizr for concatenate things.
Both of this projects are entirely developed with requirejs modules (you can see that in their github repos) and then they use the requirejs optimizer as a very smart concatenator. The interesting thing is that, as you can see, nor jQuery neither Modernizr needs on requirejs to work, and this happen because they erase the requirejs syntatic ritual in order to get rid of requirejs in their code. So they end up with a standalone library that was developed with requirejs modules! Thanks to this they are able to perform cutsom builds of their libraries, among other advantages.
For all those interested in concatenation with the requirejs optimizer, check out this post
Also there is a small tool that abstracts all the boilerplate of the process: AlbanilJS

I agree with above answer. But here is another way of CSS compression.
You can concat your CSS by using YUI compressor:
module.exports = function(grunt) {
var exec = require('child_process').exec;
grunt.registerTask('cssmin', function() {
var cmd = 'java -jar -Xss2048k '
+ __dirname + '/../yuicompressor-2.4.7.jar --type css '
+ grunt.template.process('/css/style.css') + ' -o '
+ grunt.template.process('/css/style.min.css')
exec(cmd, function(err, stdout, stderr) {
if(err) throw err;
});
});
};

You don't need to add the concat package, you can do this via cssmin like this:
cssmin : {
options: {
keepSpecialComments: 0
},
minify : {
expand : true,
cwd : '/library/css',
src : ['*.css', '!*.min.css'],
dest : '/library/css',
ext : '.min.css'
},
combine : {
files: {
'/library/css/app.combined.min.css': ['/library/css/main.min.css', '/library/css/font-awesome.min.css']
}
}
}
And for js, use uglify like this:
uglify: {
my_target: {
files: {
'/library/js/app.combined.min.js' : ['/app.js', '/controllers/*.js']
}
}
}

I think may be more automatic, grunt task usemin take care to do all this jobs for you, only need some configuration:
https://stackoverflow.com/a/33481683/1897196