Grunt task arguments do not work - gruntjs

I'm trying to configure grunt to have 2 tasks (development and production). But for whatever reason, whenever I add an argument, the task gets run (as you will see) but there is not output/action:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
dev: {
options: {
// define a string to put between each file in the concatenated output
separator: ';'
},
dist: {
// the files to concatenate
src: [
'public/js/jquery-1.10.2.min.js'
],
// the location of the resulting JS file
dest: 'public/js/aaaaa.src.js'
}
},
prod: {
options: {
// define a string to put between each file in the concatenated output
separator: ';'
},
dist: {
// the files to concatenate
src: [
'public/js/jquery-1.10.2.min.js'
],
// the location of the resulting JS file
dest: 'public/js/bbbbbb.src.js'
}
}
}
});
// Load Plugins
grunt.loadNpmTasks('grunt-contrib-concat');
// Default task(s).
grunt.registerTask('default', ['concat:dev']);
});
Output:
$ grunt
Running "concat:dev" (concat) task
Done, without errors.

The plugin does not support nested targets:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
dev: {
// the files to concatenate
src: [
'public/js/jquery-1.10.2.min.js'
],
// the location of the resulting JS file
dest: 'public/js/aaaaa.src.js'
},
prod: {
// the files to concatenate
src: [
'public/js/jquery-1.10.2.min.js'
],
// the location of the resulting JS file
dest: 'public/js/bbbbbb.src.js'
}
}
});
// Load Plugins
grunt.loadNpmTasks('grunt-contrib-concat');
// Default task(s).
grunt.registerTask('default', ['concat:dev']);
});

Related

How to use array variable properly in gruntfile.js

Trying to use a predefined array inside of a grunt file, thought using this.js_paths would work, but doesn't seem to work as I'm getting the error, "Cannot read property IndexOf of undefined" when it comes to trying to uglify the scripts. How can I link the js_paths variable to the files src property properly instead of copying the array into the files. Would like to define it separately at the top. Is this possible?
module.exports = function(grunt) {
// loadNpmTasks from package.json file for all devDependencies that start with grunt-
require("matchdep").filterDev("grunt-*", './package.json').forEach(grunt.loadNpmTasks);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
js_paths: [
'inc/header1/js/*.js',
'!inc/header1/js/*.min.js',
'inc/header2/js/*.js',
'inc/header2/js/*.js',
'!inc/header2/js/*.min.js',
'js/*.js',
'!js/*.min.js'
],
uglify: {
options: {
mangle: true
},
build: {
files: [{
expand: true,
src: this.js_paths,
rename: function(dst, src) {
return src.replace('.js', '.min.js');
}
}]
}
},
watch: {
scripts: {
files: ['inc/header1/js/*.js', 'inc/header2/js/*.js', 'js/*.js'],
tasks: ['uglify'],
options: {
spawn: false,
}
}
}
});
grunt.registerTask('default', ['uglify', 'watch']);
};
Preferrably would like to use the same array js_paths in the watch files (since it's required there), if that makes sense? Still kinda new to using gruntfile.js
Utilize the Templates syntax. It's described in the docs as following:
Templates
Templates specified using <% %> delimiters will be automatically expanded when tasks read them from the config. Templates are expanded recursively until no more remain.
Essentially, change this.js_paths to '<%= js_paths %>' in your uglify task.
For instance:
// ...
uglify: {
options: {
mangle: true
},
build: {
files: [{
expand: true,
src: '<%= js_paths %>', // <-----
rename: function(dst, src) {
return src.replace('.js', '.min.js');
}
}]
}
},
// ...
Likewise for your watch task too.
For instance:
watch: {
scripts: {
files: '<%= js_paths %>', // <-----
tasks: ['uglify'],
options: {
spawn: false,
}
}
}

Running minified in Grunt cannot read property of undefined

I'm trying to build a Grunt task that minifys my JS files and return a single minified JS file.
This is my gruntfile.js file:
module.exports = function (grunt) {
// Project configuration.
grunt.initConfig({
minified: {
files: {
src: [
'js/*.js',
],
dest: 'js/min/'
},
options: {
allinone: true
}
},
});
grunt.loadNpmTasks('grunt-minified');
};
When I run the task it does work, but it also returns an error.
> cmd.exe /c grunt -b "C:\Users\alucardu\documents\visual studio 2015\Projects\JS-demo\JS-demo" --gruntfile "C:\Users\alucardu\documents\visual studio 2015\Projects\JS-demo\JS-demo\Gruntfile.js" minified
Running "minified:files" (minified) task
Warning: Cannot read property 'yellow' of undefined Use --force to continue.
Process terminated with code 3.
Aborted due to warnings.
I've done a search action in my entire solution for 'yellow' but it doesn't return any results. Also when I empty both my JS files that are being minified it still returns the error.
Does anyone know why it's returning this error?
By removing the
options: {
allinone: true
}
The warning no longer showed up, but it also doesn't concat the files together. So I've added another task called concat. So now my gruntfile looks like this:
module.exports = function (grunt) {
// Project configuration.
grunt.initConfig({
watch: {
scripts: {
files: ['js/*.js'],
tasks: ['concat', 'minified', 'uglify'],
},
},
concat: {
dist: {
src: ['js/*.js'],
dest: 'js/min/concat.js'
},
},
minified: {
files: {
src: ['js/min/concat.js'],
dest: 'js/min/minified.js'
},
},
uglify: {
my_target: {
files: {
'js/min/uglify.js': ['js/min/minified.jsconcat.js']
}
}
},
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-minified');
grunt.loadNpmTasks('grunt-contrib-uglify');
};
And it seems to be working fine.

Grunt kill watch session & use variables in grunt file names

I am using grunt-contrib-watch and this sublime package sublime-grunt.
I am using the sublime-grunt package to start a watch session and livereload with the Chrome extension. Everything works great however once a 'watch' session is started what is the command to stop/kill/cancel a watch. I tried using a command in the sublime-grunt package called 'Grunt Kill Running Processes' and it tells me something has been canceled but if I change my style.scss file and save it, it compiles and updates are made to my html page, so 'watch' is still in effect. Right now I have to close down Sublime Text to kill the 'watch' session.
I am trying to use a variable for a path to my theme root directory but when I try to concat the variable with a string I received this error. What type of syntax should I use, do I need to create a variable in the package.json file?
Code
var theme_path = 'wp-content/themes/twentyfifteen/';
// Sass plugin
sass: {
dist: {
files: {
theme_path + 'style.css': theme_path + 'sass/style.scss',
}
}
},
// Error
Loading "Gruntfile.js" tasks...ERROR
>> SyntaxError: C:\wamp\www\grunt\Gruntfile.js:31
>> theme_path + 'style.css': 'wp-content/th
emes/twentyfifteen/sass/style.scs
>> ^
>> Unexpected token +
Warning: Task "default" not found. Use --force to continue.
Here is my Gruntfile.js:
module.exports = function(grunt) {
// Theme Directory Path
var theme_path = 'wp-content/themes/twentyfifteen/';
// Configure main project settings
grunt.initConfig({
// Basic settings and info about our plugins
pkg: grunt.file.readJSON('package.json'),
// Watch Plugin
watch: {
sass: {
files: 'wp-content/themes/twentyfifteen/sass/*.scss',
tasks: ['sass','postcss','uglify'],
options: {
livereload: true,
},
},
},
// Sass plugin
sass: {
dist: {
files: {
'wp-content/themes/twentyfifteen/style.css': 'wp-content/themes/twentyfifteen/sass/style.scss',
}
}
},
// Postcss plugin
postcss: {
options: {
map: true, // inline sourcemaps
// or
map: {
inline: false, // save all sourcemaps as separate files...
},
processors: [
require('pixrem')(), // add fallbacks for rem units
require('autoprefixer')({browsers: 'last 2 versions'}), // add vendor prefixes
require('cssnano')() // minify the result
]
},
dist: {
src: 'wp-content/themes/twentyfifteen/style.css'
}
},
// Minify JS Uglify
uglify: {
dist: {
files: {
'wp-content/themes/twentyfifteen/js/functions.min.js': ['wp-content/themes/twentyfifteen/js/functions.js']
}
}
}
});
// Load the plugin
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-postcss');
grunt.loadNpmTasks('grunt-contrib-uglify');
// Run plugin
grunt.registerTask('default', ['watch'] );
}
I think that tasks options can't have variable assigned, i don't have any source at the moment but i can suggest another way to do it:
you can use task params:
watch: {
sass: {
files: '<%= grunt.task.current.args[0] %>/sass/*.scss',
tasks: ['sass:<%= grunt.task.current.args[0] %>','postcss','uglify'],
options: {
livereload: true,
},
},
},
sass: {
dist: {
files: {
'<%= grunt.task.current.args[0] %>/style.css': '<%= grunt.task.current.args[0] %>/sass/style.scss',
}
}
},
and than
grunt.registerTask('default', ['watch:'+theme_path] );
This is a problem that i have already meet to make dynamic watch tasks

Watch directory of LESS files with Grunt

My current Grunt code:
module.exports = function(grunt) {
grunt.initConfig({
// running `grunt less` will compile once
less: {
development: {
options: {
paths: ["custom"],
yuicompress: true
},
files: {
"custom/file1.css": "custom/*.less",
"custom/file2.css": "custom/*.less"
}
}
},
// running `grunt watch` will watch for changes
watch: {
files: "custom/*.less",
tasks: ["less"]
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.registerTask('default', ['less:development']);
};
Rather than specifying two individual files "file1" and "file2", i would prefer it to compile and watch all .less files within "custom".
Apparently, you have to use the rename callback :
files: [{
src: ['custom/*.less'],
expand: true,
rename: function(dest, src) { return dest + src.replace('.less', '.css') },
dest: ''
}]
Source: https://github.com/gruntjs/grunt-contrib-less/issues/135

How do I configure the amdloader in grunt-ts?

Using grunt-ts on my project, here is my Gruntfile:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
ts: {
build: {
src: ['ts-src/**/*.ts'],
//compile using the requirejs module style
module: 'amd',
//write generated files to ts-out directory
outDir: '../js/ts-out',
amdloader: 'loader.js',
//generate a reference file
reference: 'reference.ts',
//generate .d.ts files
declaration: true,
options: {
comments: true, //preserves comments
target: 'es5' //emit ECMAScript5 JS
}
}
},
watch: {
files: ['<%= ts.build.src %>'],
tasks: ['ts']
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-ts');
grunt.registerTask('default', ['watch']);
}
This "works", but it is generating a loader.js file that incorrectly prepends the outDir value onto the entries in the file. This results in a path for each file that contains js/ts-out, twice.
Does the amdloader option have configuration options, where I can override this?
I suspect it should be :
outDir: '../js/ts-out',
amdloader: '../js/ts-out/loader.js',
See : https://github.com/grunt-ts/grunt-ts/blob/master/Gruntfile.js#L101-L117 i.e.:
amdloadersrc: {
test: true,
src: ['test/amdloader/ts/app/**/*.ts'],
html: ['test/amdloader/ts/app/**/*.html'],
reference: 'test/amdloader/ts/app/reference.ts',
outDir: 'test/amdloader/js/app',
amdloader: 'test/amdloader/js/app/loader.js',
// watch: 'test/amdloader/app'
},
amdloadertest: {
test: true,
src: ['test/amdloader/ts/test/**/*.ts'],
html: ['test/amdloader/ts/test/**/*.html'],
reference: 'test/amdloader/ts/test/reference.ts',
outDir: 'test/amdloader/js/test',
amdloader: 'test/amdloader/js/test/loader.js',
},
amdloader takes an absolute path to the generated JS location

Resources