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?
Related
I'm trying to move from Assetic to Webpack but it seems quite tricky.
I have 6 different JS entries, containing different files.
I'm running "yarn encore dev":
Problem 1: I get "ERROR Failed to compile with 0 errors" - BUT it does seem to compile.
Problem 2: All compiled entries are almost identical (same size) except the first one. All that change is the filename written inside the file.
Maybe it's not really compiling in fact, then how could I fix the "Failed to compile with 0 errors" error?
My webpack.config.js:
let Encore = require('#symfony/webpack-encore');
Encore
.setOutputPath('web/build/')
.setPublicPath('/build')
.setManifestKeyPrefix('build/')
//-- this one is well-compiled (I think)
.addEntry('app-vendors', './assets/app-vendors.js')
//-- those ones are all identical
.addEntry('app-classes', './assets/app-classes.js')
.addEntry('markable-maps-classes', './assets/markable-maps-classes.js')
.addEntry('markable-maps-vendors', './assets/markable-maps-vendors.js')
.addEntry('calendar-vendors', './assets/calendar-vendors.js')
.addEntry('calendar-classes', './assets/calendar-classes.js')
.enableSingleRuntimeChunk()
;
var config = Encore.getWebpackConfig();
config.node = { fs: 'empty' };
module.exports = config;
app-classes.js
let files = [
'classes/Foldable.js',
'classes/HorizontalPlanning.js',
'classes/PlanningWorkTimes.js',
'classes/AttachmentsList.js',
'classes/CameraModal.js',
'classes/Affair.js',
'classes/AffairStepsFinancialInfos.js',
'classes/Forms.js',
'classes/NewEventContextMenu.js',
'classes/GroupAction.js',
'classes/AuthRights.js',
'functions.js',
'init.js'
];
for (let file of files)
require('../web/js/Business/' + file);
calendar-classes.js
let files = [
'classes/Calendars/BaseCalendar.js',
'classes/Calendars/SingleCalendar.js',
'classes/Calendars/SyncCalendars.js',
'classes/Calendars/EmployeesSyncCalendars.js',
'classes/Calendars/Planning.js',
'classes/Calendars/RoomsSyncCalendars.js',
];
for (let file of files)
require('../web/js/Business/' + file);
calendar-vendors.js
let files = [
'fullcalendar/fullcalendar.js',
'fullcalendar/locale/fr.js',
];
for (let file of files)
require('../web/js/Business/' + file);
Command output:
$ yarn encore dev
yarn run v1.16.0
$ '/Volumes/Macintosh HD Data/Users/theredled/Sites/qualispace/deploy/node_modules/.bin/encore' dev
Running webpack ...
ERROR Failed to compile with 0 errors 17:11:12
Entrypoint app-vendors [big] = app-vendors.css app-vendors.js
Entrypoint app-classes [big] = app-classes.js
Entrypoint markable-maps-classes [big] = markable-maps-classes.js
Entrypoint markable-maps-vendors [big] = markable-maps-vendors.js
Entrypoint calendar-vendors [big] = calendar-vendors.js
Entrypoint calendar-classes [big] = calendar-classes.js
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
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.
I have 3 separate apps in 3 different folders. e.g. folder1, folder2 and folder3. folder3 is the combination of folder1 and folder2. Right now, I run dist task on both folder1 and folder2, then with bower link I link those dist folders with in folder3. Is there any way I could run a task with in folder3 that will create dist on folder1 and folder2, and link them with folder3? In short I want to run grunt task of folder1 and folder2 from folder3 and link them.
grunt.config.set('exec', {
loginapp: {
command: 'grunt -b C:/project/loginapp dist'
}
});
grunt.registerTask('all', [
'exec:loginapp'
]);
Folder structure
c:\project
----loginapp
dist
GruntFile.js
----webapp
public
bower_components
dist-loginapp
GruntFile.js
Hope this helps. I am in webapp > GruntFile where I run dist and that should run dist task on loginapp before its on dist task.
You can use -b flag to specify an alternate base path where there is a Gruntfile.
Then use grunt-exec to create task that run grunt task of your other projects.
E.g :
module.exports = function(grunt) {
grunt.config.set('exec', {
distFolder1: {
command: 'grunt -b relative/path/to/Gruntfile/of/folder1 taskName'
},
distFolder2: {
command: 'grunt -b relative/path/to/Gruntfile/of/folder2 taskName'
},
});
grunt.loadNpmTasks('grunt-exec');
};
Now you just have create a register task that run these two task and you other task.
E.g :
module.exports = function(grunt) {
grunt.registerTask('distAndLink', [
'exec:distfolder1',
'exec:distfolder2',
// your other task (bower link)
]);
};
and then run grunt distAndLink from folder 3.
using gurunt syncall, I want to dynamically sync every dir(and new dir created in the futrue) in project root except 'node_modules' dir to another dir.
using grunt watchall, I want to watch those dirs, when there are some changes in a dir, I want to automaticlly run the corresponding sync task.
here is my project root's structure:
├── Gruntfile.js
├── addon1
│ └── a.toc
├── adon3
│ └── 3.toc
├── node_modules
│ ├── grunt
│ ├── grunt-contrib-watch
│ └── grunt-sync
└── package.json
the grunt syncall command is ok, here is the result:
➜ testsync grunt syncall
Running "config" task
Running "sync:addon1" (sync) task
Running "sync:adon3" (sync) task
Done, without errors.
but the grunt watchall not ok. can you tell me why watchall tasks not work and how to fix it?
I start the command, and change and save the file '3.toc' in dir 'adon3', then grunt say:
➜ testsync grunt watchall
Running "config" task
Running "watch" task
Waiting...
>> File "adon3/3.toc" changed.
Running "sync:adon3" (sync) task
Verifying property sync.adon3 exists in config...ERROR
>> Unable to process task.
Warning: Required config property "sync.adon3" missing. Use --force to continue.
Aborted due to warnings.
here is my Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({});
var destdir = "/Users/morrxy/project/testdest/";
// dynamic config sync and watch's targets for every dir except for node_modules
grunt.registerTask('config', 'config sync and watch', function() {
grunt.file.expand({filter: 'isDirectory'},
['*', '!node_modules']).forEach(function(dir) {
// config sync's targets
var sync = grunt.config.get('sync') || {};
sync[dir] = {
files: [{
cwd: dir,
src: '**',
dest: destdir + dir
}]
};
grunt.config.set('sync', sync);
// config watch's target
var watch = grunt.config.get('watch') || {};
watch[dir] = {
files: dir + '/**/*',
// is next line has problem?
// running 'grunt watchall'
// when I change and save the file '3.toc' in dir 'adon3', terminal say:
// >> File "adon3/3.toc" changed.
// Running "sync:adon3" (sync) task
// Verifying property sync.adon3 exists in config...ERROR
// >> Unable to process task.
// Warning: Required config property "sync.adon3" missing.
// but why 'grunt syncall' can work?
tasks: 'sync:' + dir
};
grunt.config.set('watch', watch);
});
});
grunt.loadNpmTasks('grunt-sync');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('syncall', ['config', 'sync']);
grunt.registerTask('watchall', ['config', 'watch']);
};
Finally, I solved this problem. I add a github repo for this question. If you want test, you can clone it run it locally. https://github.com/morrxy/dynasync
The reason watchall can watch files changes but can't run the corresponding sync task is that when watch find files changed, the config for each sync is finnished running, so the config for that sync target is gone, we didn't save the running config any where. So to solve this problem, we could add the config task into the watch task before the sync task, like this tasks: ['config_sync', 'sync:' + dir].
in new Gruntfile.js, I split the config task to two task, one for config watch, one for config sync, in the watch task, using the config sync task. Here is the new Gruntfile.js
module.exports = function(grunt) {
var destdir = "/media/data/projects/dynasync_dest/";
grunt.loadNpmTasks('grunt-sync');
grunt.loadNpmTasks('grunt-contrib-watch');
// dynamic config sync's targets for every dir except for node_modules
grunt.registerTask('config_sync', 'dynamically config sync', function() {
grunt.file.expand({filter: 'isDirectory'},
['*', '!node_modules']).forEach(function(dir) {
// config this dir's sync target
var sync = grunt.config.get('sync') || {};
sync[dir] = {
files: [{
cwd: dir,
src: '**/*',
dest: destdir + dir
}]
};
grunt.config.set('sync', sync);
});
});
// dynamic config watch's targets for every dir except for node_modules
grunt.registerTask('config_watch', 'dynamically config watch', function() {
grunt.file.expand({filter: 'isDirectory'},
['*', '!node_modules']).forEach(function(dir) {
// config this dir's watch target
var watch = grunt.config.get('watch') || {};
watch[dir] = {
files: dir + '/**/*',
// this line solve the problem
// when find file change, first dynamically config sync and then sync the dir
tasks: ['config_sync', 'sync:' + dir]
};
grunt.config.set('watch', watch);
});
});
grunt.registerTask('syncall', ['config_sync', 'sync']);
grunt.registerTask('watchall', ['config_watch', 'watch']);
grunt.registerTask('default', ['watchall']);
};
This time, when watch find file changes, it can run the corresponding sync task. like this
grunt watchall
Running "config_watch" task
Running "watch" task
Waiting...
>> File "adon3/3.toc" changed.
Running "config_sync" task
Running "sync:adon3" (sync) task
Done, without errors.
Completed in 0.888s at Thu Apr 10 2014 14:01:26 GMT+0800 (CST) - Waiting...
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'] }