I'm trying to compile Jade files to HTML and put them in a directory.
Currently when I compile, the created HTML files are going into the right directory but they are within a created directory called jade.
Here is my directory structure:
jade
html
But after compile it looks like this:
jade
html/jade
Ideally I just want the HTML files to go into the html directory and not within a jade directory.
Here is the relevant part of my gruntfile:
jade: {
compile: {
files: [{
expand: true,
src: ['jade/**/*.jade'],
dest: 'html/',
ext: '.html'
}]
}
}
Output structure mirrors the src option. Try the cwd option.
Refer to: http://gruntjs.com/configuring-tasks#building-the-files-object-dynamically
Example:
jade: {
compile: {
files: [{
expand: true,
cwd: 'jade/',
src: ['**/*.jade'],
dest: 'html/',
ext: '.html'
}]
}
}
Related
So I have been trying to create my first compiled css files using grunt and sass, and i am having a problem that I cant figure it out.
Every time that I run the sass task, an unnecessary "sass" folder is created inside of my css folder:
This is how it looks:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
watch:{
sass:{
files:['sass/*.scss'],
task:['sass']
}
},
sass: {
dist: {
files: [{
expand: true,
cwd: '',
src: ['sass/*.scss'],
dest: 'css/',
ext: '.css'
}]
}
}
});
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['sass']);
};
And this is how my folder looks after I run the task:
/SASS/somefile.scss
/CSS/SASS/somefile.css
The SASS folder it should not be there, the result i expect is:
/SASS/somefile.scss
/CSS/somefile.css
Thanks in advance!
The problem is due to your parameters for building the files object dynamically. You need to set the cwd parameter: "All src matches are relative to (but don't include) this path."
files: [{
expand: true,
cwd: 'sass/',
src: '*.scss',
dest: 'css/',
ext: '.css'
}]
Create a SASS folder under your CSS folder. Your somefile.scss file move into SASS folder then run.
like as :
CSS/
SASS/somefile.scss
I have the dependencies of the application in bower_components, some of the dependencies don't have a minified version so I'd like to create a task creates a minified copy of the file version in the same place where the file is located like:
bower_components
lib1
lib1.js
lib1.min.js <- create this file if doesn't exist
lib2
lib2.js
lib2.min.js <- create this file in it's own lib2 folder
lib3
lib3.js
lib3.min.js <- and so on...
This is my grunt Config so far:
uglify: {
dev: {
files:[
{
expand: true,
src: 'bower_components/modernizr/modernizr.js',
dest: '/',
ext:'.min.js'
}, {
expand: true,
src: 'bower_components/angular-facebook/lin/angular-facebook.js',
dest: '/',
ext: '.min.js'
}]
},
main: {
src: 'temp/app.min.js',
dest:'dist/app.min.js'
}
}
the Grunt task says that copied modernizr to it's own folder but when I look at it, the file is not there and after the first file Grunt passes to the next task and ignores the 'second' file in the array.
I was just testing this obviously I'd like to implement a way that grunt scan all the dependencies in bower_components automatically.
btw, I don't mind to change the task to any other library.
the / in your dest-option means the root path (were your gruntfile resides). just delete the dest-option or put an empty string there.
important: this just works with the expand-option set!
{
expand: true,
src: 'bower_components/modernizr/modernizr.js',
ext:'.min.js'
}
Edit:
for scanning all folders an minimizing all js files do it like this (note the second argument in src to not minify files which are already minified):
{
expand: true,
src: ['bower_components/**/*.js', '!bower_components/**/*.min.js'],
ext:'.min.js'
}
I have the following in my jade.js file
'use strict';
var config = require('../config');
module.exports = {
dist: {
options: {
pretty: true,
debug: false,
timestamp: '<%= new Date().getTime() %>'
},
files: [{
expand: true,
cwd: 'html_templates/views/',
src: '**/*.jade',
dest: 'html_templates/html/',
ext: '.html'
}]
}
};
It is working great ! The only problem is that, i am working on a very large application and my jade files are over 10mb. When i modify the view of one jade file and run 'grunt jade'. It recompiles all my html (takes about 5 minutes). How to i tell grunt to only compile the relevant jade file(only one html file)
Example: I am working on:
html_templates/views/module/landingpage2.jade
I want to compile only:
html_templates/html/module/landingpage1.html
Please help
Use grunt-newer. https://www.npmjs.org/package/grunt-newer
Just install it and run your task as "newer:jade" and pretty much that's all.
It also works with watch etc.
I'm trying to copy all the files in a directory to another directory as part of my build process. It works fine for individual files that I specify explicitly but when I try to copy the whole directory it does weird things like copies the full directory structure (or nothing at all). Here is the relevant part from my GruntFile.js:
copy: {
myvoice: {
files: [
{ src:"src/html/index.html", dest:"dist/myvoice/index.html" },
{ src:"src/html/css/style.css", dest:"dist/myvoice/css/style.css" },
{ src:"src/html/js/require.js", dest:"dist/myvoice/js/require.js" },
{ src:"build/myvoice/main.js", dest:"dist/myvoice/js/main.js" },
{ src:"src/html/css/fonts/*", dest:"dist/myvoice/css/fonts/" }
]
}
},
Specifically it's the last line that I can't get to work:
{ src:"src/html/css/fonts/*", dest:"dist/myvoice/css/fonts/" }
The flatten: true option as in this answer might work for some cases, but it seems to me that the more common requirement (as in my case) is to copy a folder and its sub-folder structure, as-is, to dest. It seems that in most cases if you have sub-folders, they are probably being referenced that way in code. The key to doing this is the cwd option, which will preserve folder structure relative to the specified working directory:
copy: {
files: {
cwd: 'path/to/files', // set working folder / root to copy
src: '**/*', // copy all files and subfolders
dest: 'dist/files', // destination folder
expand: true // required when using cwd
}
}
This task will maintain folder structure if you specify a file glob. What you want is the flatten option which will remove the structure.
{
expand: true,
flatten: true,
src: ['src/html/css/fonts/**'],
dest: 'dist/myvoice/css/fonts/',
filter: 'isFile'
}
Find the rest of the available options in the Github repo. Hope this helps.
I would like to add that changing the format of the glob in src will modify how the copy works.
As pointed out by bmoeskau above, the following will copy everything inside dist/ and move it to path/to/dir (overwriting the destination if it already exists).
copy: {
files: {
expand: true,
dest: 'path/to/dir',
cwd: 'dist/',
src: '**'
}
}
Note however, that:
copy: {
files: {
expand: true,
dest: 'path/to/dir',
cwd: 'dist/',
src: '*'
}
}
Will only copy files inside dist/ as well as directories, but will not copy the contents of those directories to the destination.
Also, the following with src: '*/*' will only copy directories with contents inside dist/. That is, files just inside dist/ will not be copied.
copy: {
files: {
expand: true,
dest: 'path/to/dir',
cwd: 'dist/',
src: '*/*'
}
}
Finally, same as above, but src: '**/**' will copy only files inside dist/ as well as files inside dist/ subdirectories to path/to/dir. So there will be no folders inside the destination.
copy: {
files: {
expand: true,
dest: 'path/to/dir',
cwd: 'dist/',
src: '*/*',
flatten: true,
filter: 'isFile'
}
}
Had to use egdy instead curly braces for the files segment (in Coffeescript)...
copy: {
files: [
cwd: 'path/to/files'
src: '**/*'
dest: 'dist/files'
expand: true
]
}
If you are developing with angular yeoman , then this is the better way to copy with grunt.
expand: true is required when using cwd. <%= yeoman.app %> is just the app route ('.').
{
expand: true,
cwd: '<%= yeoman.app %>/data',
dest: '<%= yeoman.dist %>/data',
src: ['**']
}
Using Grunt, I want to concat one file to all of the files in a build directory. The purpose of doing so is to append (or potentially prepend) IE specific CSS files to a build CSS file.
To task this:
build/
file1.css
file2.css
file3.css
And create this:
build/
file1.css
file1.ie.css
file2.css
file2.ie.css
file3.css
file3.ie.css
I thought that the expand option might be what I was looking for but I can't figure out how to get it to do what I want.
Try the banner option in grunt-contrib-concat:
concat: {
dist: {
options: {
banner: '/* IE specific things here */',
},
expand: true,
cwd: 'build/',
ext: '.ie.css',
src: ['**/*.css'],
dest: 'build/',
},
},