Trying to get jade to save my jade files as HTML files while keeping the same file name.
So the file views/index.jade should save as dist/index.html
Same for additional files.
I am using grunt-contrib-jade
The jade configuration of my Gruntfile:
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
jade: {
compile: {
options: {
pretty: true
},
files: {
'dist/*.html': ['views/*.jade']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-jade');
grunt.registerTask('default', ['jade']);
};
But it just saves the file as *.html
I think it's doing what you are telling it to do.
Try this for configuration of the jade task:
jade: {
compile: {
options: {
pretty: true
},
files: [{
expand: true, // setting to true enables the following options
cwd: '/jade', // src matches are relative to this path
src: ['{,*/}*.jade'], // matches *.jade in cwd and 1 level down
dest: 'dist/', // destination prefix
ext: '.html' // replace existing extensions with this value
}]
}
}
here is is some information about building file lists dynamically with Grunt.
Related
I have written the grunt task to transpile ES6 to ES5. Following is my Gruntfile.js file
module.exports = function (grunt)
{
require("load-grunt-tasks")(grunt);
grunt.initConfig({
"babel": {
options: {
presets: ['es2015']
},
dist: {
files: [{
expand: true,
cwd: '/Users/pankajmeshram/Documents/IVWorkSpace/enfresh/resources/modules',
src: ['**/*.es6'],
dest: '/Users/pankajmeshram/Documents/IVWorkSpace/enfresh/resources/modules',
ext: '.js'
}]
}
}
});
grunt.registerTask("default", ["babel"]);
};
In this file, I want to pass the cwd and dest option dynamically so that I can use this for the different project as well as we have common build for all our projects.
If anyone work on this before, you can suggest some ways or any alternative solution for this task.
module.exports = function(grunt) {
require("load-grunt-tasks")(grunt);
grunt.initConfig({
"babel": {
options: {
presets: ['es2015']
},
dist: {
files: [{
expand: true,
cwd: "<%= cwd %>",
src: ['**/*.es6'],
dest: "<%= dest %>",
ext: '.js'
}]
}
}
});
grunt.registerTask("dynamicConfigs", "Set Dynamic Configs", function (argName, argValue) {
grunt.config.set(argName, argValue);
});
grunt.registerTask("default", ["dynamicConfigs:cwd:/Users/vineethgn/Documents/IVWorkSpace/enfresh/resources/modules", "dynamicConfigs:dest:/Users/vineethgn/Documents/IVWorkSpace/enfresh/resources/modules", "babel"]);
};
You can define those properties as template and then before calling babel task, call the newly created dynamicConfigs task.
Inside dynamicConfigs you are basically setting the key-value pair in grunt.config.
Make sure to call dynamicConfigs task with the parameters you want to set like in the sample code above.
I have the following folder structure:
+ web
+ component
- component.js
- component.scss
- component.css
+ another
- another.js
- another.scss
- another.css
As you can see I compile every css into his component folder.
This is my configuration:
grunt.initConfig({
sass: {
dist: {
files: [{
expand: true,
cwd: './',
src: ['web/**/*.scss'],
dest: './',
ext: '.css'
}]
}
},
watch: {
files: ["web/**/*.scss"],
tasks: ['sass'],
options : { spawn: false }
}
});
Everything works fine, but the problem is that every time a scss file is changed, it compiles ALL the scss in my web folder.
I want to compile only the changed scss.
I also tried installing grunt-newer and changing the watch configuration in:
watch: {
files: ["web/**/*.scss"],
tasks: ['newer:sass'],
options : { spawn: false }
}
But it doesn't compile anything now.
ps: I would like to avoid mapping every single file in the sass configuration (scss -> css) since the rule is the same for all the files (same name, same folder), and because I have tons of them.
ok, i was close.. i'll post the answer as well, it may help someone.
i had to remove options : { spawn: false }, so my config file now is like this:
grunt.initConfig({
sass: {
dist: {
files: [{
expand: true,
cwd: './',
src: ['web/**/*.scss'],
dest: './',
ext: '.css'
}]
}
},
watch: {
files: ["web/**/*.scss"],
tasks: ['newer:sass']
}
});
I have a Sailsjs project, and it comes with Grunt built in. Here is what tasks/register/prod.js looks like:
module.exports = function(grunt) {
grunt.registerTask('prod', [
'compileAssets',
//'concat',
'uglify',
'cssmin',
'sails-linker:prodJs',
'sails-linker:prodStyles',
//'sails-linker:devTpl',
//'sails-linker:prodJsJade',
//'sails-linker:prodStylesJade',
//'sails-linker:devTplJade'
]);
};
and here is my attempt to get Grunt to minify files separately tasks/config/cssmin.js:
module.exports = function(grunt) {
grunt.config.set('cssmin', {
dist: {
src: 'assets/css/test.css',
dest: '.tmp/public/min/test.min.css'
}
});
grunt.config.set('cssmin', {
dist: {
src: 'assets/css/main.css',
dest: '.tmp/public/min/main.min.css'
}
});
grunt.loadNpmTasks('grunt-contrib-cssmin');
};
This doesn't work correctly, it only gives me main.min.css (minified) but not test.min.css.
"dist" is not a static part of the syntax, it's the name of the target. You can have as many targets as you want, but you can't have two with the same name.
grunt.config.set('cssmin', {
test: {
src: 'assets/css/test.css',
dest: '.tmp/public/min/test.min.css'
},
main: {
src: 'assets/css/main.css',
dest: '.tmp/public/min/main.min.css'
}
});
Running "cssmin" executes both targets, "cssmin:test" runs the first one and "cssmin:main" runs the second.
The second time you set the value for the cssmin task you are overwriting your previous value, thus you are only returned main.min.css.
To minify multiple separate files with cssmin you would only set grunt.config once and it would look like this:
module.exports = function(grunt) {
grunt.config.set('cssmin', {
dist: {
src: 'assets/css/test.css',
dest: '.tmp/public/min/test.min.css'
},
dist2: {
src: 'assets/css/main.css',
dest: '.tmp/public/min/main.min.css'
}
});
grunt.loadNpmTasks('grunt-contrib-cssmin');
};
I have a grunt file that watches for changes on app.css. The watch appears to be processing the file multiple times upon change of app.css. Checked the file and the output is correct.
Grunt File
module.exports = function(grunt) {
"use strict";
grunt.initConfig({
//concat: {
// css: {
// src: ['app/css/*.css'],
// dest: 'app/css/app.min.css'
// }
//},
cssmin: {
minify: {
expand: true,
cwd: 'app/css/',
src: ['*.css', '!*.min.css'],
dest: 'app/css/',
ext: '.min.css'
}
},
watch: {
//js: {
// files: ['app/js/**/*.js'],
// tasks: ['concat']
//},
css: {
files: ['app/css/*.css'],
tasks: ['cssmin']
}
}
});
//grunt.loadNpmTasks('grunt-contrib-concat'); // Load concat
grunt.loadNpmTasks('grunt-contrib-watch'); // Load watch
grunt.loadNpmTasks('grunt-contrib-cssmin'); // Load CSS min
grunt.registerTask('default', ['watch']); // Load default task
};
It is because the first pass modifies the app.css file which creates app.min.css -- but your watcher is looking for modifications to ANY CSS files (including the newly-created app.min.css).
You can either ignore *.min.css in your watcher config, or just output the minified CSS to a folder you're not watching.
I'm working on some automation tasks and I noticed that grunt.js and uglify module are not rewriting the minified file. They're appending a new version of code everytime I start grunt tasks.
module.exports = function(grunt) {
grunt.initConfig({
uglify : {
build : {
src : ['**/*.js', '!*.min.js'],
cwd : 'js/app/modules/',
dest : 'js/app/modules/',
expand : true,
ext : '.main.min.js',
},
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['uglify']);
};
What can I do to avoid it? I just want the newest version of code in the file.
I had the same problem with the following configuration for all files in subfolders to js/ (e.g. js/lib/*.js) :
build: {
expand: true,
cwd: 'js/',
src: ['**/*.js','!*.min.js'],
dest: 'js/',
ext: '.min.js',
}
You have to restrict more files, because if a file matches the src-option the content will be appended and not replaced - because it is "locked" i guess:
src: ['**/*.js','!**/*.min.js']
That should fix your problem.
Thanks SpazzMarticus! I user grunt-newer to run uglify with newer files only.
You can try this:
grunt.initConfig({
uglify: {
options: {
},
build: {
files: [{
expand: true,
cwd: 'public/js',
src: ['**/*.js','!**/*.min.js'],
dest: 'public/js',
ext: '.min.js'
}]
}
},
watch: {
options: {
livereload: true,
nospawn: true
},
scripts:{
files: ['public/js/**/*.js'],
tasks: ['newer:uglify']
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-newer');
grunt.registerTask('yt', ['watch']);