dose any one know how I can configure my grunt file for haml?
I have this now:
haml: {
dist: {
files: {
'index.html': 'index.haml'
}
}
}
I've also tried `
haml: {
dist: {
files: {
['index.html']: 'index.haml'
}
}
}
both along with
grunt.loadNpmTasks('grunt-contrib-haml');
I've been able to get compass running but not haml. I tried the config.rb file as well.
I'd imagine you did, but are you registering the task at the end of your Gruntfile.js file? Also, what error messages (if any) are you getting when you run 'grunt haml -v' from the command line?
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
haml: {
dist: {
files: {
'index.html':'index.haml'
}
}
});
grunt.loadNpmTasks('grunt-contrib-haml');
grunt.registerTask('default','['haml']);
^^^^ this last bit here, is it in your Gruntfile? You should have something similar for Compass to run.
This package always gives me some grief when I install it, for whatever reason.
Related
I am trying to use html-minifier grunt plugin (https://github.com/gruntjs/grunt-contrib-htmlmin) and the documentation says we can use multiple targets; That is, we can specify different options for different build environment. In the below example 2 targets are configured 'dist' and 'dev'
grunt.initConfig({
htmlmin: {
dist: {
options: {
removeComments: true,
collapseWhitespace: true
},
files: {
'dist/index.html': 'src/index.html'
}
},
dev: {
files: {
'dist/index.html': 'src/index.html'
}
}
}
});
But my question is, while using grunt how can I instruct the plugin to use specific target? For example, for a production build I want to use "dist" target specified in plugin config. I can do grunt htmlmin but it triggers 'dev' target only.
How to shorten class names in html and in css files
I have this class name
.profile-author-name-upper
And want to change this like this
.p-a-n-u
or
.panu
I'm usinig js task runner GruntJS
So what you need is uglification
This is just part from tutorial I copied online from grunt-contrib-uglify grunt plugin
Simple Configuration
npm install grunt grunt-contrib-uglify --save-dev
This will install grunt as well uglifyjs in your node_modules devDependencies as well as update package.json
Inside your Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
uglify: {
my_target: {
files: {
'dest/minified.js': ['src/jquery.js', 'src/angular.js']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify'); // load the given tasks
grunt.registerTask('default', ['uglify']); // Default grunt tasks maps to grunt
};
From the command line:
*$ grunt
Running "uglify:my_target" (uglify) task
1 file created.
Done, without errors*
In my generator I want to run npm i and jspm i sequentially so that the log output won't mixed together. How do I do that?
Currently, if I put them together:
install: function() {
this.npmInstall();
this.spawnCommand('jspm', ['install']);
}
or
install: {
npm: function() { this.npmInstall(); },
jspm: function() { this.spawnCommand('jspm', ['install']); }
}
the will be run at the same time.
I'm aware that I can put jspm i in the end queue, but I want to use it for post-install code and it has the same problem (i.e. all codes in end queue are run in parallel).
Yeoman is only Node.js and JavaScript. You'll handle this in the same way you'd handle any asynchronous action.
In Yeoman, you use this.async() to define an asynchronous task:
install: {
npm: function() {
this.npmInstall();
},
jspm: function() {
this.spawnCommand('jspm', ['install']).on('close', this.async());
}
}
Note you can also use this.spawnCommandSync
I’m using https://github.com/jney/grunt-htmlcompressor to compress HTML files. But it’s requiring me to manually type-in all the HTML files which I want minified:
grunt.initConfig({
htmlcompressor: {
compile: {
files: {
'dest/index.html': 'src/index.html'
},
options: {
type: 'html',
preserveServerScript: true
}
}
}
});
Is there a way to specify that I want to minify all HTML files of the entire folder (and subfolders)?
Or, in case this html-compressor is limited, are you aware of a different npm package that does this HTML mification?
The glob pattern should be allowed for any grunt task by default. Then simply use dynamic files to build each one to your dest
Instead of:
files: {
'dest/index.html': 'src/index.html'
},
Go with:
files: [
{
expand: true, // Enable dynamic expansion.
cwd: 'src/', // Src matches are relative to this path.
src: ['**/*.html'], // Actual pattern(s) to match.
dest: 'dest/', // Destination path prefix.
},
],
As far as another plugin I would recommend grunts contrib version since it's more common and maintained by the grunt team.
I would like to use a custom reporter for jshint in a grunt setting. At the moment I don't have time to become a node.js/grunt expert, so I had hoped to find a sample grunt file that includes a definition of a reporter and how to supply it to jshint.
Extensive searching has given me only a few sample gruntfile.js, none of which change the reporter for jshint. I looked at the summaries all of the stack overflow posts that mention "gruntfile.js".
Thanks
You need this:
options: {
reporter: 'jslint'
}
Here is mine Gruntfile.js (raw):
/* jshint strict: true, devel: true */
require('./config.js');
module.exports = function(grunt) {
'use strict';
grunt.initConfig({
jshint: {
all: ['Gruntfile.js', 'config.js', 'src/**/*.js'],
options: {
reporter: 'jslint'
}
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.registerTask('foo', function() {
requirejs('resources').copy();
});
grunt.registerTask('default', ['jshint', 'foo']);
};