Using glob patterns not for default Grunt keys - gruntjs

1. Summary
I can't set grunt-clean-console plugin, that it works for all my .html files.
2. Details
grunt-clean-console check browser console errors for .html files.
I want to check browser console errors for all .html files of my site. In official descripition I read, how plugin works for specific values of url key. I have many pages in my site; I don't want add each .html file separately. But I can't find, how I can use patterns.
I find, that I can use patterns for built-in Grunt cwd, src, dest keys. But how I can use glob (or another) patterns for custom keys as url of this plugin?
3. Data
Gruntfile.coffee:
module.exports = (grunt) ->
grunt.loadNpmTasks 'grunt-clean-console'
grunt.initConfig
'clean-console':
all:
options:
url: 'output/index.html'
return
example project configuration:
output
│ 404.html
│ index.html
│
├───KiraFirstFolder
│ KiraFirstfile.html
│
└───KiraSecondFolder
KiraSecondFile.html
If I set specific values for url key without patterns as in example above, grunt-clean-console successfully works:
phantomjs: opening page output/index.html
phantomjs: Checking errors after sleeping for 5000ms
ok output/index.html
phantomjs process exited with code 0
Done.
3.1. Steps to reproduce
I run in console:
grunt clean-console --verbose
4. Not helped
4.1. Globbing
Official documentation
Gruntfile.coffee:
module.exports = (grunt) ->
grunt.loadNpmTasks 'grunt-clean-console'
grunt.initConfig
'clean-console':
all:
options:
url: 'output/**/*.html'
return
output:
phantomjs: opening page http://output/**/*.html
phantomjs: Unable to load resource (#1URL:http://output/**/*.html)
phantomjs: phantomjs://code/runner.js:30 in onResourceError
Error code: 3. Description: Host output not found
phantomjs://code/runner.js:31 in onResourceError
phantomjs: loading page http://output/**/*.html status fail
phantomjs://code/runner.js:50
phantomjs process exited with code 1
url output/**/*.html has 1 error(s)
>> one of the urls failed clean-console check
Warning: Task "clean-console:all" failed. Use --force to continue.
Aborted due to warnings.
4.2. Building the object dinamically
Official documentation
Gruntfile.coffee (example):
module.exports = (grunt) ->
grunt.loadNpmTasks 'grunt-clean-console'
grunt.initConfig
'clean-console':
all:
options:
url:
files: [
expand: true
cwd: "output/"
src: ['**/*.html']
dest: "output/"
]
return
output:
File: [no files]
Options: urls=[], timeout=5, url=["output/**/*.html"]
Fatal error: missing url
4.3. Templates
Official documentation
Gruntfile.coffee:
module.exports = (grunt) ->
grunt.loadNpmTasks 'grunt-clean-console'
grunt.initConfig
'clean-console':
all:
options:
url: '<%= kiratemplate %>'
kiratemplate: ['output/**/*.html'],
return
output:
phantomjs: opening page http://output/**/*.html
phantomjs: Unable to load resource (#1URL:http://output/**/*.html)
phantomjs: phantomjs://code/runner.js:30 in onResourceError
Error code: 3. Description: Host output not found
phantomjs://code/runner.js:31 in onResourceError
loading page http://output/**/*.html status fail
phantomjs://code/runner.js:50
phantomjs process exited with code 1
url output/**/*.html has 1 error(s)
>> one of the urls failed clean-console check
Warning: Task "clean-console:all" failed. Use --force to continue.
Aborted due to warnings.

Create a function before the grunt.initConfig part that utilizes grunt.file.expand. For instance:
Gruntfile.js
module.exports = function(grunt) {
grunt.loadNpmTasks 'grunt-clean-console'
// Add this function...
function getFiles() { return grunt.file.expand('output/**/*.html'); }
grunt.initConfig({
'clean-console': {
all: {
options: {
url: getFiles() // <-- invoke the function here.
}
}
}
// ...
});
// ...
}
Notes:
The getFiles function returns an array of file paths for all .html files matching the given glob pattern, i.e. 'output/**/*.html'.
The value of the options.url property is set to getFiles() to invoke the function.

Related

Task not found when grunt is run using load-grunt-config

I am learning Grunt and want to use load-grunt-config to start with. Here is my code :
Gruntfile.js
module.exports = function (grunt){
var path = require('path');
require('load-grunt-config')(grunt, {
configPath: path.join(process.cwd(), 'grunt-tasks'),
});
grunt.registerTask('install',['test']);
};
I have grunt-tasks folder in root directory of my project along with Gruntfile.js and in that I have included test.js
test.js
module.exports = {
test :{
local : {
}
}
};
Now when I say grunt install from command line and using CWD as my project's root directory I get following error :
Warning: Task "test" not found. Use --force to continue.
and when I include following segment in Gruntfile.js
loadGruntTasks : {
pattern : '*'
}
I get following error :
>> Local Npm module "load-grunt-config" not found. Is it installed?
Warning: Task "test" not found. Use --force to continue.
May I know what I don't understand here?

Visual Studio 2015: Destination wwwroot/css/site.css not written because no source files were found.

I'm trying to use grunt in my ASP project, but for whatever reasons have get a stupid warning-message from Visual Studio.
How you can see down, the bower-task has been executed, but haven't uglify- and less-tasks. Gruntfile.js and folder "wwwroot" are in the same folder. What's wrong ?
This is console output in Visual Studio 2015:
> cmd.exe /c grunt -b "c:\T\BW\src\BW" --gruntfile "c:\T\BW\src\BW\gruntfile.js" bower
Running "bower:install" (bower) task
>> Installed bower packages
>> Copied packages to c:\T\BW\src\BW\wwwroot\lib
Done, without errors.
Process terminated with code 0.
> cmd.exe /c grunt -b "c:\T\BW\src\BW" --gruntfile "c:\T\BW\src\BW\gruntfile.js" uglify_default
Running "uglify:uglify_target" (uglify) task
Process terminated with code 0.
>> Destination wwwroot/lib/angular/angular.js not written because src files were empty.
>> No files created.
Done, without errors.
> cmd.exe /c grunt -b "c:\T\BW\src\BW" --gruntfile "c:\T\BW\src\BW\gruntfile.js" less
Running "less:dev" (less) task
>> Destination wwwroot/css/site.css not written because no source files were found.
Done, without errors.
Process terminated with code 0.
This is my gruntfile.js:
grunt.initConfig({
bower: {
install: {
options: {
targetDir: "wwwroot/lib",
layout: "byComponent",
cleanTargetDir: false
}
}
},
uglify: {
uglify_target: {
files: {
"wwwroot/lib/angular/angular.js":["src/angular.min.js"]
}
}
},
less: {
dev: {
files: {
"wwwroot/css/site.css": ["less/site.less"]
},
options: {
sourceMap: true,
}
}
},
});
grunt.registerTask("default", ["bower:install"]);
grunt.loadNpmTasks("grunt-bower-task");
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.loadNpmTasks("grunt-contrib-less");
Are you sure "wwwroot/lib/angular/angular.js":["src/angular.min.js"] is correct in your uglify step? Uglify is for minifying files, so it would seem as if you have the destination and source parameters reversed. You are also getting the message Destination wwwroot/lib/angular/angular.js not written because src files were empty. which would seem to indicate that as well.
The less step seems correct, but it can't find the less file you are trying to compile. Are you sure that site.less exists in a less folder?
Here is the less portion of the grunt file I just wrote, and it seems to work well, although getting the sourcemap to actually generate is still an issue. This is pretty much an exact equivalent of VS 2013 with Web Essentials installed. Compiling all less files in the content folder using autoprefix for the browsers we support, and puts the .css back into the content folder. It doesn't compile any less file that starts with _, as those are just includes/variables.
less: {
development: {
options: {
paths: ["content"],
compress: true,
plugins: [
new (require('less-plugin-autoprefix'))({ browsers: ["IE >= 9, firefox > 10, last 2 Chrome versions, last 2 safari versions, last 2 ios versions"], map: { inline: false } })
]
},
files: [{
expand: true,
cwd: 'content',
src: ['*.less', '!_*.less'],
dest: 'content',
ext: '.css'
}]
}
},

Requirejs optimization with grunt

I am trying to create a requirejs optimization config with grunt and almond. Here's the config:
requirejs:
build:
options:
almond: true
dir: 'build'
appDir: ''
baseUrl: '../client'
wrap: true
include: '../client/main'
keepBuildDir: true
paths:
underscore: 'client/vendor/underscore'
jquery : 'client/vendor/jquery'
backbone : 'client/vendor/backbone'
Folder Structure:
Error:
C:\Users\User\Documents\Source\Project>grunt requirejs
Running "requirejs:build" (requirejs) task
>> Error: ENOENT, no such file or directory
>> 'C:\Users\User\Documents\Source\Project\build\models\MenuItem.js'
>> In module tree:
>> ../client/main
Warning: RequireJS failed. Use --force to continue.
Main.js code (written in coffeescript)
requirejs.config(
baseUrl: "client"
shim:
'backbone':
deps: ['jquery']
exports: 'Backbone'
'jquery':
exports: '$'
'underscore':
exports: '_'
paths:
jquery: 'vendor/jquery-1.11.0'
underscore: 'vendor/underscore'
backbone: 'vendor/backbone'
)
define 'start', ()->
window.types =
Models: {}
Collections: {}
Views: {}
null
require ['models/MenuItem', 'views/MenuItem'], (MenuItemModel, MenuItemView)->
view = new MenuItemView(
new MenuItemModel(),
"#app",
'first'
)
view.render();
null
I want to compile my entire project spread across multiple js files into a single file in a way that requirejs would not be needed. I am trying to do this using almond js but the build task does not look for referenced files relative to the path of referring file. Please help me with the correct configuration.

Contatenation with grunt-contrib-concat doesn't work

I use grunt-contrib-concat, but it doesn't appear to work.
All file are in the folder.
I used --verbose to see the details, but everything seems to be working correctly.
concat: {
options: {
// define a string to put between each file in the concatenated output
separator: ';'
},
dist: {
// the files to concatenate
src: [
//'assets/javascript/components/*.js',
'assets/javascript/components/jquery-ui-1.10.3.custom.js',
'assets/javascript/components/spectrum.js',
'assets/javascript/components/prefixfree.min.js',
'assets/javascript/src/jquery.menu_css3.js'
],
// the location of the resulting JS file
dest: 'assets/javascript/jquery.<%= pkg.name %>.min.js'
}
},
Running the tasks with --verbose:
Running "concat" task
Running "concat:dist" (concat) task
Verifying property concat.dist exists in config...OK
Files: assets/javascript/src/jquery.menu_css3.js -> assets/javascript/jquery.menu_css3.min.js
Options: separator=";", banner="", footer="", stripBanners=false, process=false
Reading assets/javascript/src/jquery.menu_css3.js...OK
Writing assets/javascript/jquery.menu_css3.min.js...OK
File "assets/javascript/jquery.menu_css3.min.js" created.
Running "uglify" task
Running "uglify:dist" (uglify) task
Verifying property uglify.dist exists in config...OK
Files: assets/javascript/jquery.menu_css3.min.js -> assets/javascript/jquery.menu_css3.min.js
Options: banner="", footer="", compress={"warnings":false}, mangle={}, beautify=false, report=false
Minifying with UglifyJS...Reading assets/javascript/jquery.menu_css3.min.js...OK
OK
Writing assets/javascript/jquery.menu_css3.min.js...OK
File "assets/javascript/jquery.menu_css3.min.js" created.

Grunt Concat cannot write to file

Just installed latest Grunt on Ubuntu 12.04. Here is my gruntfile:
module.exports = function(grunt){
//project configuration
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
slides : {
src : ['src/top.html', 'src/bottom.html'],
dest : ['build/index.html']
}
}
});
//enable plugins
grunt.loadNpmTasks('grunt-contrib');
grunt.registerTask('default', ['concat:slides']);
}
This creates the build/ directory fine, but gives me the output of:
Running "concat:slides" (concat) task Warning: Unable to write
"build/index.html" file (Error code: undefined). Use --force to
continue.
I tried running chmod 777 on the directory, as I thought it might have something to do with permissions, but that didn't seem to change anything.
How can I make it so Grunt will write to build/index.html?
Figured it out:
//Does not work
dest : ['build/index.html']
Works as a string, but not an array:
//Works
dest : 'build/index.html'
I changed tasks/concat.js to accept arrays for dest:
// Write the destination file.
// If f.dest is an array take the first element
var dest = ([].concat(f.dest))[0]
grunt.file.write(dest, src);
but later I decided to use the files form instead of src/dest:
files: { 'dest.js': ['a.js', 'b.js'] }

Resources