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.
Related
I'm trying to use Grunt's grunt-contrib-watch plugin to watch some files and then run the tasks, just what it was made for, this is my Gruntfile.js
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
options: {
sourceMap: true,
outputStyle: 'compressed'
},
dist: {
files: {
'static/stylesheets/main.min.css': 'static/stylesheets/sass/main.scss',
/*'bower_components/foundation-sites/dist/foundation.min.css': 'bower_components/foundation-sites/scss/foundation.scss'*/
}
}
},
uglify: {
dist: {
files: {
'static/javascript/main.min.js': 'static/javascript/main.js'
}
}
},
watch: {
files: [
'<%= sass.dist.files %>',
'<%= uglify.dist.files %>'
],
tasks: [
'sass',
'uglify'
]
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['watch']);
};
When I run it, it runs over and over and over again, and when I stop it, I see I have this message:
Running "watch" task
Waiting...
Warning: pattern.indexOf is not a function
I really don't know what's the problem. Does anybody know what happens here?
UPDATE:
Apparently, the problem is because of the way I call the files, because I changed it to: 'static/stylesheets/sass/*.scss' and it worked well, but I would like to know why the other way doesn't work, because I think is a more useful way to do it.
grunt-contrib-watch expects either a single pattern string or an array of pattern strings as the value of its files config. However, the templates you are using in your config evaluate to objects. Your watch.files value evaluates to the following:
files: [
{ 'static/stylesheets/main.min.css': 'static/stylesheets/sass/main.scss' },
{ 'static/javascript/main.min.js': 'static/javascript/main.js' }
]
When the pattern matching tries to run it fails because there is no indexOf method on an Object. Due to the fact that grunt-contrib-watch runs forever, there is an infinite loop of the trying and failing to build the list of watched files.
You would normally configure your watch files with something like the following:
files: [
'static/**/*.scss',
'static/**/*.js'
]
But the above will cause issues in your case because your minified JS file is in the same folder as your source JS file. You could probably get around this by adding '!static/**/*.min.js' to your files array, but a better solution would be to put all of your compiled files into a separate folder.
Extract the values from the object:
watch: {
files: [
'<%= sass.dist.files.values() %>',
'<%= uglify.dist.files.values() %>'
],
I have a file structure like this:
/server/
- package.json
- node_modules/
- Gruntfile.js
/public/
- index.html
- assets/
When in /server I run npm install, which downloads things like Angular into /server/node_modules.
I then run the Gruntfile.js which looks like this:
require('load-grunt-tasks')(grunt);
grunt.initConfig({
//concat js
concat: {
options: {
separator: ';',
sourceMap: true
},
lib: {
src: [
'./node_modules/angular/angular.js',
'./node_modules/angular-route/angular-route.js',
'./node_modules/angular-animate/angular-animate.js'
],
dest: '../public/assets/build/lib/lib.min.js'
}
},
//minify js
uglify: {
options: {
mange: true,
compress: true,
sourceMap: true
},
lib: {
src: '<%= concat.lib.dest %>',
dest: '<%= concat.lib.dest %>'
}
}
});
grunt.registerTask('build', ['concat', 'uglify']);
The grunt file works as expected to concat and minify the Angular modules with a source map. The problem is that the domain name points to the public directory, but the source map wants to point to the Angular source code in the server directory, which I don't think will work.
How do I get around this problem? Do I have to have the node_modules in the root of the public directory? I'd rather not have any precompiled code in the public directory if possible, the reason being that when I put the site live, I can simply FTP the public directory and ignore the server, reducing unnecessary bulk.
i have this situation:
i have some js libraries downloaded via bower in bower_componenents folder
some custom javascript in a different js folder
my concat task is the following:
concat: {
dist: {
src: [
'bower_components/jquery/jquery.js',
'bower_components/imagesloaded/imagesloaded.js',
'js/libs/*.js',
'js/custom/*.js'
],
dest: 'js/build/production.js'
}
}, //end concat
the result gets then processed by grunt uglifier like so:
uglify: {
dist: {
src: 'js/build/production.js',
dest: '_site/js/production.min.js'
}
}, //end uglify
what happens here is everything goes smoothly if i add just ONE library from bower_components folder (in my case jquery). if i add a second one (in my case images loaded), the resulting javascript file gets broken and no javascript works at all.
if i inspect the production.min.js file i notice all the needed code is actually there, but it doesn't work.
what am i missing?
should i use grunt-bower-concat? if yes, why and will it concatenate also my custom js?
for a reference, i'm using this grunt boilerplate: https://github.com/vlrprbttst/grunt-boilerplate-v2
thanks!!
that's fixed with:
concat: {
options: {
separator: ';',
},
dist: {
and
uglify: {
options: {
mangle: false
},
dist: {
Whenever I run grunt jade I get an error:
Warning: pattern.indexOf is not a function Use --force to continue.
Now here is my jade task:
jade: {
options: {
pretty: true
},
all: {
files: {
expand:true,
cwd: 'src/static/jade',
ext: "html",
src: ['src/static/jade/**/*.jade', '!src/static/jade/_includes'],
dest: 'build/'
}
}
}
So basically I am trying to take the jade files in src/static/jade (including subdirs, except _include) and put them in build, keeping the directory structure. I have tryed commenting the expand line, however it gives me:
Warning: Unable to read "src/static/jade" file (Error code: EISDIR). Use --force to continue.
Perhaps I am going about this the wrong way. How should I fix this?
Your initial issues is that files should be an array of objects, not just an object: files: [{...}].
But then you have other troubles with your file definition:
if you specify cwd, your src should not repeat it
your ext needs a starting .
your ! pattern needs to specify files instead of a dir
So you need:
files: [{
expand:true,
cwd: 'src/static/jade/',
ext: ".html",
src: ['**/*.jade', '!_includes/**/*.jade'],
dest: 'build/'
}]
I've just scaffolded an Angular app using Yeoman. I've noticed that the build task does several things by default, including minifying and concatenating js files.
I'd like to have a simpler build task that didn't do any minifying or concatenation, and, instead, only did the following two things:
compile my .scss into .css
copy a working app into my distribution directory
Can anyone help me write a grunt task that will do (only) these two things?
Many thanks.
Ok, I've edited the default grunt file so that it does what I want.
My solution involved writing tasks called copy:devDist and compass:devDist, and then combining them into a devDist task.
//
// copy:devDist --> copies everything into the dist folder, except styles/
//
copy: {
[...]
devDist: {
files: [{
expand: true,
dot: true,
cwd: '<%= yeoman.app %>',
dest: '<%= yeoman.dist %>',
src: [
'**','!styles/**' // everything but styles/
]
}]
}
},
//
// compass:devDist --> compile the sass; put result in dist/styles/
//
compass: {
[...]
devDist: {
options: {
cssDir: '<%= yeoman.dist %>/styles'
}
}
},
//
// register a 'devDist' task that calls the two tasks above
//
grunt.registerTask('devDist', [
'clean:dist',
'copy:devDist',
'compass:devDist'
]);
Now running grunt devDist compiles my css and puts a fully functional app into my dist folder. Excellent. :)