Accessing the process / environment from a grunt template - javascript

I have some code in a grunt.js file which is working with 0.3 but breaks on 0.4:
{
dest: '<%= process.env.DEST %>/index.html'
}
In 0.3 process is defined and so I can access variables defined in the environment inside the template when I am e.g. passing file paths to other plugins.
Is there an alternative approach to this which will work in 0.4? Or a way to put a breakpoint in while the template is rendering so that I can see what variables are available?

The default data is the config object. You can add the environment variable to the config object or just use it directly.
grunt.initConfig({
destination: process.env.DEST,
task: {
target: {
dest: '<%= destination %>/index.html'
}
},
});
or
grunt.initConfig({
task: {
target: {
dest: process.env.DEST + '/index.html'
}
},
});

That's a great straight forward answer by Sindre. Alternatively you can do (use the grunt-env plugin: https://npmjs.org/package/grunt-env )-
grunt.initConfig({
env : {
test : {
DEST : 'testDEST'
},
dev : {
DEST : 'devDEST'
},
qa : {
DEST : 'qaDEST'
},
prod : {
DEST : 'prodDEST'
}
}
});
grunt.registerTask('setenvs', 'Set environment variables', function() {
grunt.config('ENVS', process.env);
});
and then use
{
dest: '<%= ENVS.DEST %>/index.html'
}
Your task would be -
grunt.registerTask('default', [
'env:dev',
'setenvs'
'yourTask'
]);
Proposed alternative approach just so that you can use <%= ... %> and you don't have to hardcode it in initConfig. Target for env you can take as input from user and pass it to env.

Related

Grunt task Sass on several files in several folders using parameters

I have a folder with differents design project, on each one I may have scss files to compile. So I did a Gruntfile to watch on all this folders for the scss files and I want to compile them in their directory. But it' actually not working because of this error :
Running "sassAll" task
Running "sass:animating-rocket" (sass) task
Verifying property sass.animating-rocket exists in config...ERROR
>> Unable to process task.
Warning: Required config property "sass.animating-rocket" missing. Use --force to continue.
Aborted due to warnings.
It seems that a variable is not define on the config scope...
My Gruntfile looks like this :
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
options: {
style: 'compressed'
},
files: [{
src: ['<%= grunt.task.current.args[0] %>/*.scss'],
dest: '<%= grunt.task.current.args[0] %>',
ext: '.css'
}]
}
},
watch: {
options: {
livereload: true
},
css: {
files: ['**/*.scss'],
tasks: ['sassAll'],
options: {
spawn: false
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('sassAll', function () {
gruntUtils.sassTasks.forEach(function (param) {
grunt.task.run('sass:' + param);
});
});
var gruntUtils = {
sassTasks: ['animating-rocket', 'hamburger-animation']
};
grunt.registerTask('default', ['sassAll', 'watch']);
};

Grunt in sails.js failing to recognise new task

I am trying to add a new grunt task in a sails.js application.
To keep my test case simple i have copied the copy task to a new file copy-tests.js, which is also in the tasks/config folder.
I have modified copy-tests.js to update the first param of the set method to 'copy-tests', so it now reads
module.exports = function(grunt) {
grunt.config.set('copy-tests', {
dev: {
files: [{
expand: true,
cwd: './assets',
src: ['**/*.!(coffee|less)'],
dest: '.tmp/public'
}]
},
build: {
files: [{
expand: true,
cwd: '.tmp/public',
src: ['**/*'],
dest: 'www'
}]
}
});
grunt.loadNpmTasks('grunt-contrib-copy');
};
I have updated compileAssets.js to add my new tasks, so it now reads
module.exports = function (grunt) {
grunt.registerTask('compileAssets', [
'clean:dev',
'jst:dev',
'less:dev',
'copy:dev',
'copy-tests:dev',
'coffee:dev',
'jade:dev'
]);
};
When i try to lift the sails app i get 'Task "copy-tests:dev" not found'
I know that grunt can see my file as i have added a log statement to Gruntfile.js as follows
var taskConfigurations = loadTasks('./tasks/config'),
registerDefinitions = loadTasks('./tasks/register');
console.log(taskConfigurations);
I can see copy-tests in among the other tasks when this statement logs
Can anyone help with why grunt claims it can't find copy-tests:dev ?
Alternatively maybe i am going about this the wrong way. What i am trying to achieve is having two copy tasks, one to copy my main build content to the .tmp folder, and a second one to copy my client side tests to the .tmp folder. Later i will make sure that only my dev builds run both copy tasks, my prod one will only run the first one. I thought the best way to do this would be with two grunt tasks in the config folder, but maybe there is another way...
Rather than define a second task to have an alternative copy, i needed to add to the Copy task as follows
module.exports = function(grunt) {
grunt.config.set('copy', {
dev: {
files: [{
expand: true,
cwd: './assets',
src: ['**/*.!(coffee|less)'],
dest: '.tmp/public'
}]
},
devTests: {
files: [{
expand: true,
cwd: './tests',
src: ['**/*.*'],
dest: '.tmp/public/tests'
}]
},
build: {
files: [{
expand: true,
cwd: '.tmp/public',
src: ['**/*'],
dest: 'www'
}]
}
});
grunt.loadNpmTasks('grunt-contrib-copy');
};
My compileAssets then looks like
module.exports = function (grunt) {
grunt.registerTask('compileAssets', [
'clean:dev',
'jst:dev',
'less:dev',
'copy:dev',
'copy:devTests',
'coffee:dev',
'jade:dev'
]);
};
I realised this when i looked at the sails-linker.js task and saw how many targets there were in that. I had been thinking of the targets as build targets and assuming they would have values like dev, test, prod etc, but it appears that they are a broader concept and every type of copy i might want to do should be a target in the copy.js task.

pass middleman variable to grunt file

My middleman template has an 'id' variable that I put my html emails job name into.
I know if I change my middleman erb file from index.html.erb to newName.html.erb it will output that as the final files name.
My problem is that most of my grunt tasks require the file name I want them to run on (I've tried using *.html, but it only works for some tasks) and short of editing that in the grunt file prior to starting grunt up they won't execute if I change the erb file name.
Is there a way to pass grunt that 'id' variable to name the file middleman is outputting and also plug that variable into the various tasks so they too accept that as what the filename?
Here is my grunt config:
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// Build html
middleman: {
options: {
useBundle: true
},
server: {},
build: {
options: {
command: "build"
}
}
},
// Format html file
prettify: {
options: {
// Task-specific options go here.
},
one: {
src: 'build/index.html',
dest: '_output/index.html'
}
},
// Run the text converter
execute: {
simple_target_with_args: {
options: {
// execute node with additional arguments
args: ['_output/index.html']
},
src: ['node_modules/node-text-converter/converter.js']
}
},
'special-html': {
compile: {
files: {
'_output/index.html': '_output/index.html',
}
}
},
'phantomjs_screenshot': {
main: {
options: {
delay: 1000
},
files: [{
expand: true,
cwd: '_output',
src: ['**/*.html'],
dest: '_output/screenshots/',
ext: '.jpg'
}]
}
}
});
You should store your variable in a JSON file and import it both into Middleman and Grunt.

grunt htmlmin: don't specify filename in the gruntfile.js

my task is the following:
htmlmin : {
dist : {
options : {
removeComments : true,
collapseWhitespace : true
},
files : {
'index.html' : 'index-src.html'
}
}
},
this works fine when i have just one html file on my site, so this processes index-src.html into minified index.html.
what if i have 100 other html files to process? i don't want to manually list them in my gruntfile.
how can i abstract the file name and tell grunt to minify my src file to the corresponding production file? in my case they are:
source file is [name]-src.html
production file is [name].html
i'm guessing it's just a matter of syntax, but i don't know what to write.
thanks! :)
See the Globbing Patterns section of the Grunt Documentation.
I believe you'll just have to change your param files object to:
'index.html' : '*-src.html'
Update
Re-reading your question, I realized you needed a 1-1 file conversion for dynamic source and destination file names.
For that see Building the files object dynamically
I have yet to use this in my project but the syntax looks straight forward. You may need to change your src vs production naming convention to a folder based convention.
/source/name.html (source folder)
/build/name.html (destination folder)
Example
files: [
{
expand: true, // Enable dynamic expansion.
cwd: 'source/', // Src matches are relative to this path.
src: ['*-src.html'], // Actual pattern(s) to match.
dest: 'build/', // Destination path prefix.
ext: '.html', // Dest filepaths will have this extension.
extDot: 'first' // Extensions in filenames begin after the first dot
}
]
module.exports = function (grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
controlCss: {
src: ['UI.controls/assets/css/*.css'],
dest: 'UI.controls/assets/css/min/production.css'
},
controlJs: {
src: ['UI.controls/assets/js/*.js'],
dest: 'UI.controls/assets/js/min/production.js'
},
coreJs: {
src: ['UI.core/assets/js/*.js'],
dest: 'UI.core/assets/js/min/production.js'
},
dist: {
src: ['UI.controls/assets/templates/*.htm'],
dest: 'UI.controls/assets/templates/min/production.min.htm'
}
},
cssmin: {
controlCss: {
src: 'UI.controls/assets/css/min/production.css',
dest: 'UI.controls/assets/css/min/production.min.css'
}
},
uglify: {
controlJs: {
src: 'UI.controls/assets/js/min/production.js',
dest: 'UI.controls/assets/js/min/production.min.js'
},
coreJs: {
src: 'UI.core/assets/js/min/production.js',
dest: 'UI.core/assets/js/min/production.min.js'
}
},
htmlmin: {
dist: {
options: {
removeComments: true,
collapseWhitespace: true
},
expand: true,
cwd: 'build',
src: ['UI.controls/assets/templates/*.htm'],
dest: 'UI.controls/assets/templates/min/production.min.htm'
}
}
});
// 2. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-htmlmin');
// 3. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['concat', 'cssmin', 'uglify', 'htmlmin']);
};

grunt.js - Multiple destinations when minifying files

My grunt.js has a typical minification task:
min: {
dist: {
src: ['dist/precook.js'],
dest: 'dist/precook.min.js'
}
}
What is the simplest way to have multiple dest files? I'd like to minify into:
dist/precook.min.js
example/js/vendor/precook.min.js
The built-in min task doesn't appear to support multiple destinations, so I assume this can be achieved via a simple "copy" task. Can someone please point me in the right direction?
I'd use grunt-contrib-copy plugin:
Install with npm:
npm install grunt-contrib-copy
Modify grunt.js (add copy task definition and load copy plugin):
...
copy: {
dist: {
files: {
'example/js/vendor/': 'dist/precook.min.js'
}
}
}
...
grunt.loadNpmTasks('grunt-contrib-copy');
Optionally register copy in to grunt's default task.
The added beauty here is that you can now perform all other copy tasks as well. Even patterns are supported, like copy all minified files ('dist/*.min.js').
concat: {
css: {
src: ['UI.controls/assets/css/*.css'],
dest: 'UI.controls/assets/css/min/production.css'
},
js: {
src: ['UI.controls/assets/js/*.js'],
dest: 'UI.controls/assets/js/min/production.js'
},
js2: {
src: ['UI.core/assets/js/*.js'],
dest: 'UI.core/assets/js/min/production.js'
}
},
cssmin: {
css: {
src: 'UI.controls/assets/css/min/production.css',
dest: 'UI.controls/assets/css/min/production.min.css'
}
},
uglify: {
js: {
src: 'UI.controls/assets/js/min/production.js',
dest: 'UI.controls/assets/js/min/production.min.js'
},
js2: {
src: 'UI.core/assets/js/min/production.js',
dest: 'UI.core/assets/js/min/production.min.js'
}
},
watch: {
css: {
files: ['UI.controls/assets/css/*.css'],
tasks: ['concat:css', 'cssmin:css']
},
js: {
files: ['UI.controls/assets/js/*.js'],
tasks: ['concat:js', 'uglify:js']
},
js2: {
files: ['UI.core/assets/js/*.js'],
tasks: ['concat:js', 'uglify:js']
}
}
This is an alternative approach (next to #jalonen's solution) which may to interesting to you, IF you are using requirejs to modularize your project, then you can use the requirejs optimizer to minify your modules.
First of all, you need to add grunt-contrib-requirejs to your project:
npm install grunt-contrib-requirejs --save-dev
Grunt configuration:
requirejs: {
production:{
options:{
// don't include libaries when concatenating/minifying
paths:{
angular:'empty:',
jquery:'empty:'
},
baseUrl:'path/to/src/js',
dir:'path/to/target/js',
// keeps only the combined files
removeCombined:true,
modules:[
{name:'app', exclude: ['moduleA', 'moduleB']},
{name:'moduleA'},
{name:'moduleB'}
]
}
}
}
...
grunt.loadNpmTasks('grunt-contrib-copy');
Explanation:
Let's say you have this dependency tree (-> means depends on):
app -> moduleA -> moduleA1
-> moduleA2
app -> moduleB -> moduleB1
-> moduleB2
After minifying you will have three files:
app (minified version of app)
moduleA (minified version of moduleA, moduleA1, and moduleA2)
moduleB (minified version of moduleB, moduleB1, and moduleB2)
Had a similar problem and created a grunt multi-task that runs a list of specified tasks on multiple directories
Usage for the exact case:
```
min: {
dist: {
src: ['dist/precook.js'],
dest: 'dist/precook.min.js'
}
},
multidest: {
minifiedFiles: {
tasks: ['min'],
dest: [
'dist/precook.min.js',
'example/js/vendor/precook.min.js'
]
}
}
```

Categories

Resources