So, I have installed single page app based on npm/bower/grunt/angular.js
In the root I have gruntfile.js with this code
module.exports = function(grunt) {
var gtx = require('gruntfile-gtx').wrap(grunt);
gtx.loadAuto();
var gruntConfig = require('./grunt');
gruntConfig.package = require('./package.json');
gtx.config(gruntConfig);
// We need our bower components in order to develop
gtx.alias('build:standardversion', [
'compass:standardversion',
...
]);
gtx.finalise();
So now I have to install grunt-cache-bust plugin from here https://github.com/hollandben/grunt-cache-bust
I installed it with npm and now I don't know where to write a task for this.
Please tell me or give me a link to understand it properly
In the directory containing GruntFile.js, create a "grunt" folder if it doesn't exist.
In the "grunt" folder, create a file "cacheBust.js"
sample cacheBust.js:
module.exports = {
assets: {
files: {
src: ['index.html', 'contact.html']
}
}
}
To run cacheBust from the command line: "grunt cacheBust"
Related
It is possible to write grunt config files in es6 like this?
//Gruntfile.js
module.exports = function (grunt) {
var arr = [1,2,3];
arr.forEach(val => {
...
});
...
}
One possible way to do this painlessly is to use Babel's babel-register module like this:
Installation:
npm install babel-register --save-dev
.babelrc:
{
presets: ["es2015"]
}
Gruntfile.js:
require('babel-register')
module.exports = require('./Gruntfile.es').default
Gruntfile.es
export default function(grunt) {
grunt.initConfig({})
}
GruntJS is a javascript based application. It runs under the node/iojs process and adheres to the capabilities of that environment. If you use iojs or a node version that supports these features, then yes, its possible.
My project uses Bower to install deps and Grunt to build. My project tree looks like this
|
|-bower_components
| |
| |-jquery
| |-semantic
| |-...
|-Bower.json
|-Gruntfile.js
|-public
| |
| |-css // Compiled, concatenated and minified semantic-ui
| |-js // and other libs should be here
|-...
|-etc..
Is it possible to build custom semantic-ui (ie customize fonts, colors, remove unused components) using Grunt (or maybe using Gulp called from Grunt)?
Where to place semantic theme config and overrides files?
It's not difficulty to use grunt to build semantic-ui. I don't know about bower, but this is how I did it.
Install grunt-contrib-less.
Create a new directory somewhere in your project, e.g. '/less/semantic'. Copy 'site' directory from your semantic packagea, i.e. 'bower_components/semantic/src/site' to the new directory. All your overrides will be done here.
Create a config.json file in '/less/semantic' to configure what components you want to be included in your build. The file content will be something like this:
{
"elements": ["button", "divider"],
"collections": ["form"],
"modules": ["checkbox"]
}
Add following to your gruntFile.js file:
var fs = require('fs');
// Defines files property for less task
var getSemanticFiles = function() {
var files = {};
var config = JSON.parse(fs.readFileSync('less/semantic/config.json'));
var srcDir = 'bower_components/semantic/definitions/';
var outputDir = 'less/semantic/output/';
for (var type in config) {
config[type].forEach(function(ele) {
files[outputDir + type + '.' + ele + '.output'] = [srcDir + type + '/' + ele + '.less'];
});
}
return files;
};
Configure less task as following:
less: {
semantic: {
options: { compile: true }
files: getSemanticFiels()
},
dist: {
options: { compile: true }
files: { 'public/css/semantic.css': ['less/semantic/output/*'] }
}
}
Edit theme.config in 'bower_components/semantic/src', change #siteFoler to '../../../less/site/', and make any additional changes as needed per semantic document.
You run grunt less:semantic to compile all needed components, and then run less:dist to put them into a single css file.
Of course you can configure a watch task to automate the process. Then every time you make a change, the css will be automaticly re-built.
I am sure someone will build a grunt build to semantic one day, but for now, I just use this to call all the gulp commands using grunt. https://github.com/sindresorhus/grunt-shell. Just make sure you are calling the gulp build task and not the default gulp task. It has a watch task that will cause grunt to not finish the shell task.
In grunt-contrib-stylus there is a import option:
import
Type: Array
Import given stylus packages into every compiled .styl file, as if you wrote '#import '...' in every single one of said files.
options: {
compress: false,
use: [ require('kouto-swiss') ],
import: [ 'kouto-swiss' ]
},
How can I do the same thing with lesshat in grunt-contrib-less ?
Thanks
Since release 2 you can create plugins for Less easily. Thanks to Implementing preprocessing plugins you can create preprocess plugins too.
The preprocess plugin enable you to inject Less code before processing:
LesshatProcessor.prototype = {
process : function (src, extra) {
var injected = '#import "' + path.resolve(__dirname, '../') + '/node_modules/lesshat/build/lesshat.less";\n';
var ignored = extra.imports.contentsIgnoredChars;
var fileInfo = extra.fileInfo;
ignored[fileInfo.filename] = ignored[fileInfo.filename] || 0;
ignored[fileInfo.filename] += injected.length;
return injected + src;
}
};
I have created a Lesshat plugin already: https://github.com/bassjobsen/less-plugin-lesshat. After installing this plugin by running npm install less-plugin-lesshat and then your are able to run: lessc file.less --lesshat.
You can also use this plugin together with grunt-contrib-less:
grunt.initConfig({
less: {
options: {
plugins: [
new (require('less-plugin-lesshat'))()
]
},
files: {'css/test.css' : 'less/test.less'}
}
)};
Notice that you should install the latest version of Less with grunt-contrib-less until Less has updated the version number (and grunt-contrib-less uses that version).
To use the plugin now:
run npm install grunt-contrib-less
Navigate to node_modules/grunt-contrib-less/
Remove node_modules/less
Download and unzip the latest version of Less at https://github.com/less/less.js/archive/master.zip
run npm install ./less.js
I've read the grunt, sass, and compass documentation but can't find much about this error. I also saw another person with a similar error but it was due to syntax problems in their contrib.rb file, which I don't believe I have in my contrib.rb file.
Problem: I run the grunt watch task and get an error anytime I make a change to my sass (*.scss) files.
The error reads as follows:
NoMethodError on line 264 of /Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass/configuration/inheritance.rb: _
Run with --trace to see the full backtrace
As a result, none of my sass files are processing to my css folder. I'm new to grunt and am admittedly a little overwhelmed with the amount of initial setup I've done. I'd love any advice as to how my files might be configured incorrectly or whether there might be an error with one of the versions of compass or sass as it relates to grunt (all are most recent non-beta versions).
Here is the text of my contrib.rb file:
require "susy"
css_dir = _/css
sass_dir = _/components/sass
javascripts_dir = _/js
output_style = :compressed
My gruntfile.js :
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.initConfig({
uglify: {
my_target: {
files: {
'_/js/script.js': ['_/components/js/*.js'] //tells grunt to track and compress any .js file found in components/js folder
} //files
} // my_target
}, // uglify
compass: {
dev: {
options: {
config: 'config.rb',
force: true // <-- ???
} //options
} //dev
}, //compass
watch: {
options: { livereload: true },
scripts: {
files: ['_/components/js/*.js'],
tasks: ['uglify']
}, //scripts
sass: {
files: ['_/components/sass/*.scss'],
tasks: ['compass:dev']
}, //sass
html: {
files: ['*.html']
}
} // watch
})// initConfig
grunt.registerTask('default', 'watch'); //makes 'grunt' command automaticaly execute the watch command to monitor JS files
} //exports
And my project folder structure:
sass_first_proj
|
_(folder)
|
components
|
css
|
js
images
node_modules
|
grunt
|
grunt-contrib-compass
|
grunt-contrib-uglify
|
grunt-contrib-watch
|
matchdep
.gitignore
|
config.rb
|
gruntfile.js
|
index.html
|
package.json
Not sure if you were able to solve this, but I was receiving the same error.
I had to include a forward slash before the directories to get Grunt to the right paths. I'm using similar steps in using Grunt and Compass for my project, and I'm on my PC so I just put the paths in single quotes. Based on how your project directory is structured, the two respective lines in the config.rb file would look like this:
css_dir = '/_/css'
sass_dir = '/_/components/sass'
Also in your question, I noticed you stated it was the "contrib.rb" file, but in your file directory that it is named config.rb. You reference it in your gruntfile.js file as config.rb, as well, but I just wanted to make sure that this file in the root of your project was being named "config.rb".
I know it was a lot of setup, so I hope this works for you.
So here's the thing, I've never used a contrib.rb file when using compass with Grunt. I know you can, and if you get it working, great. but the other option is to just specify the paths in the grunt config. Of course, this all assumes that you are able to actually compile the sass files. When googling for that error, it seems that much of the time it was an issue with the contrib.rb file that caused the issue.
So with that said, maybe you could leave off the contrib.rb file and just use Grunt?
compass: {
dev: {
options: {
sassDir: "_/components/sass",
specify: "_/components/sass/**/*.scss", // might not be necessary for you
cssDir: "_/css",
javascriptsPath: "_/js",
outputStyle: "compressed",
require: "susy"
}
}
}
I am a gruntjs newbie and am trying to write a build for JS frontend. A requirement is set so that all the source files that enter the build process (concatenation, minification) must be defined in an external file:
|-config
|- js.json
|-src
|- js
|- a.js
|- b.js
|- Gruntfile.js
|- package.json
I have simplified the project structure to illustrate the problem. The config/js.json looks like this:
[
"<%=js_dir%>/a.js",
"<%=js_dir%>/b.js"
]
Gruntfile.js looks like this:
module.exports = function(grunt) {
grunt.initConfig({
concat: {
"options": {"separator": ";"},
"build": {
"src": "<%= grunt.template.process(grunt.file.read('./config/js.json'),{data: {js_dir: './src/js'}})%>"
,
"dest": "build/app.js"
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', ['concat']);
};
When I run it an empty output file is made, because the source list is empty:
...
Reading ./config/js.json...OK
Files: [no src] -> build/app.js
Reading ./config/js.json...OK
Writing out...OK
Writing build/app.js...OK
File "build/app.js" created.
Done, without errors.
To verify my logic I dumped the processed sources list by changing the src property like this:
"src": "<%= grunt.file.write('out',grunt.template.process(grunt.file.read('./config/js.json'),{data: {js_dir: './src/js'}}))%>"
The contents of the out file show that template processing logic is valid:
[
".src/js/a.js",
".src/js/b.js"
]
Since the src property accepts a hardcoded JSON array of source files my guess is that the binding of the sources list is done before the templating is done.
The gruntjs verbose output shows the reading of config/js.json before and after the concatenation which confuses me.
I tried rewriting the config/js.json file so that all the JSON array fits in one line but to no avail.
If this can be done, please tell me how. If it can't be done please tell me why.
My environment:
grunt: grunt-cli v0.1.9, grunt v0.4.1
nodejs: v0.11.6-pre
os: Linux localhost 3.2.0-23-generic #36-Ubuntu x86_64 GNU/Linux
The Grunt config will process templates as the config is read. So you dont need an additional grunt.template.process. Assuming config/js.json is valid JSON just do this:
module.exports = function(grunt) {
grunt.initConfig({
js_dir: 'src/js',
concat: {
options: {separator: ";"},
build: {
src: require('./config/js.json'),
dest: "build/app.js"
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', ['concat']);
};
Always remember Gruntfiles are JavaScript and not JSON.