In grunt, you can add a "banner" to files that have been concatenated and minfied like so:
module.exports = function (grunt) {
grunt.initConfig({
cssmin: {
add_banner: {
options: {
banner: '/* My minified css file */'
},
files: {
'dist/css/dist.min.css': ["bower_components/bootstrap/dist/css/bootstrap.css", "tmp/css/dist.css"]
}
}
}
})
}
Is there a way to do a similar thing with RequireJS? I'ved looked in the example build file provided in the RequireJS documentation, but have not been able to find any such option.
You could use the wrap option of the r.js configuration:
({
...
"wrap": {
"start": "/* My minified css file */\n",
"end": ""
},
...
})
Related
I am looking to run a node command through my gruntfile. I just need to run:
node index.js
as the first task before any other tasks. I tried searching around but haven't found the answer. I believe it might be something simple but I am not sure how. Do I need to load in nmp tasks?
This is how my Gruntfile looks like:
"use strict";
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
jshint: {
all: [
'Gruntfile.js'
],
options: {
jshintrc: '.jshintrc',
},
},
// Before generating any new files, remove any previously-created files.
clean: {
tests: ['dist/*']
},
// Configuration to be run (and then tested).
mustache_render: {
json_data: {
files: [
{
data: 'jsons/offer.json',
template: 'offers.mustache',
dest: 'dist/offers.html'
},
{
data: 'jsons/profile.json',
template: 'profile.mustache',
dest: 'dist/profile.html'
}
]
}
}
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-mustache-render');
// Whenever the "test" task is run, first clean the "tmp" dir, then run this
// plugin's task(s), then test the result.
grunt.registerTask('default', ['clean', 'jshint', 'mustache_render']);
};
I want to run "node index.js" before the 'clean' task.
The standard way of doing this is to use the grunt-run task.
Do:
npm install grunt-run --save-dev
And in your grunt file:
grunt.loadNpmTasks('grunt-run');
And then some config (from the documentation):
grunt.initConfig({
run: {
options: {
// Task-specific options go here.
},
your_target: {
cmd: 'node',
args: [
'index.js'
]
}
}
})
Then you change the task registration to be this:
grunt.registerTask('default', ['run', 'clean', 'jshint', 'mustache_render']);
I use Grunt for Node with a bunch of packages. For example jsHint, jsDoc, Browserify, Uglify ...
I run the Gruntfile with Watchify and Newer for automation. So far, so good.
The Gruntfile, which works totaly fine:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
jshint: {
all: ['my/js/files/*.js']
},
jsdoc : {
dist : {
src: ['my/js/files/*.js'],
options: {
destination: 'doc'
}
}
},
browserify: {
'public/js/files/script.js': ['my/js/files/*.js']
},
uglify: {
my_target: {
files: {
'public/js/files/script.js': ['public/js/files/script.js']
}
}
},
htmlmin: {
dist: {
files: {
'public/html/index.html': ['public/html/index.html']
}
}
},
cssmin: {
combine: {
files: {
'public/css/css.min.css': ['my/css/files/*.css']
}
}
},
watch: {
javascript: {
files: ['my/js/files/*.js'],
tasks: ['newer:jshint:all', 'jsdoc', 'browserify', 'uglify']
},
html: {
files: ['public/html/index.html'],
tasks: ['htmlmin']
},
css: {
files: ['public/css/*.css'],
tasks: ['cssmin']
}
}
});
// load plugins
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-jsdoc');
grunt.loadNpmTasks('grunt-browserify');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-htmlmin');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-newer');
};
It works as far as I only use Newer for jsHint. But if I try the same with jsDoc or Uglify I get Error-Messages.
Example:
I try this ...
tasks: ['newer:jshint:all', 'newer:jsdoc:all', 'browserify', 'uglify']
instead of ...
tasks: ['newer:jshint:all', 'jsdoc', 'browserify', 'uglify']
I get Error-Messages:
Running "newer:jsdoc:all" (newer) task
Warning: Cannot read property 'files' of undefined Use --force to continue.
Aborted due to warnings.
Why does it work for jsHint but not for the rest? Has anybody an idea? Would much appreciate some Hints!
Kind regards
the target of your jshint task is all, so newer:jshint:all is correct.
your jsdoc target is dist, so you have to use this target: newer:jsdoc:dist
for you it is even easier, you only have one target per task (only your watch task has multiple targets) so you could only do it like this:
['newer:jshint', 'newer:jsdoc', 'browserify', 'uglify']
My application is MEAN stack style. I would like to generate a package including all Nodejs and AngularJs files, so I could just unzip the package and run in other environments.
I use grunt-contrib-compress to compress and generate a zip file. Everything works well, but there are many development node modules are included, such as grunt*. All I need is the runtime node modules which are defined in the package.json. It will dramatically reduce the package size.
I could include the node modules one by one, but is there a good way only include runtime modules while packaging?
OK, I found a solution, which load the package.json and map the runtime dependencies into target folders.
compress: {
main: {
options: {
archive: 'myapp.zip'
},
files: [
{src: ['dist/**','app/**','config/**','server.js'],dest:'.'},
{src: Object.keys(require('./package.json').dependencies).map(function(module){
return "node_modules/" +module+"/**"
}),dest:'.'},
]
}
}
I had exactly the same question today, and after asking and coming up with a very similar solution, I have found your question. Here is my, similar but slightly different approach:
function getDependencies(pkg) {
return Object.keys(pkg.dependencies).map(function(val) { return val + '/**'; });
}
module.exports = function(grunt) {
var pkg = grunt.file.readJSON('package.json');
var config = {
pkg: pkg,
clean: ["public/"],
compress: {
validate: {
options: {
archive: 'public/Lambda.zip'
},
files: [
{ expand: true, cwd: 'src/', src: ['**'], dest: '/' },
{ expand: true, cwd: 'node_modules/', src: getDependencies(pkg), dest: '/node_modules' }
]
}
}
};
grunt.initConfig(config);
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-compress');
grunt.registerTask('build', ['clean', 'compress']);
}
I'm using require JS.
I want to marge two files into one.
I'm using for that require js plugin for grunt.
First file is raty jquery script.
Second is my own file like this:
define('userGlosowanie', ['jquery', 'raty'], function ($) {
'use strict';
return {
init: function () {
}
}
});
And here is my grunt script:
requirejs: {
userGlosowanie: {
options: {
baseUrl: "js/libs",
paths: {
userGlosowanie: "../dev/uzytkownik-glosowanie",
raty: "raty/jquery.raty",
},
name: "userGlosowanie",
out: "js/build/uzytkownik.min.js",
preserveLicenseComments: false,
}
},
},
Problem is that I've got error:
Running "requirejs:user" (requirejs) task
>> Error: ENOENT, no such file or directory
>> 'D:\strony\www\polskieszlaki\js\libs\jquery.js'
>> In module tree:
>> user
Warning: RequireJS failed. Use --force to continue.
my jquery file is in separate file and I don't want to include it in compiled file. How to do it?
If you don't want to include jquery in build file just mark it as empty: in path config.
options: {
paths: {
userGlosowanie: "../dev/uzytkownik-glosowanie",
raty: "raty/jquery.raty",
jquery: "empty:"
}
}
You can exclude a particular module/file from getting included in the combined/optimized file using the exclude option
In your case it will look like -
requirejs: {
userGlosowanie: {
options: {
baseUrl: "js/libs",
paths: {
userGlosowanie: "../dev/uzytkownik-glosowanie",
raty: "raty/jquery.raty",
},
out: "js/build/uzytkownik.min.js",
name: "userGlosowanie",
exclude: "jquery"
preserveLicenseComments: false,
}
}
}
With modules and dir(output dir) option, you may not be able to set the output file name, but the optmized file with same name as the module will be placed in the directory set by option dir
requirejs: {
userGlosowanie: {
options: {
baseUrl: "js/libs",
paths: {
userGlosowanie: "../dev/uzytkownik-glosowanie",
raty: "raty/jquery.raty",
},
dir: "../public",
modules : [{
name: "userGlosowanie",
exclude: "jquery"
}],
preserveLicenseComments: false,
}
}
}
Sample usage/explanation is here
I'm trying to use grunt to compile my less files into css while in development. While at it also, watch and reload. The file I've wrote is this:
module.exports = function(grunt) {
grunt.initConfig({
less: {
development: {
options: {
compress: true,
yuicompress: true,
optimization: 2
},
files: {
// target.css file: source.less file
"public/css/bootstrap.css": "./public/less/bootstrap.less"
}
}
},
watch: {
styles: {
// Which files to watch (all .less files recursively in the less directory)
files: ["public/less/*"],
tasks: ['less'],
options: {
livereload: true,
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['watch']);
};
And I have this saved as a gruntfile.js in my project root's directory. What am I doing wrong?
PS: I'm using forever to start my app and in the same terminal window I'm using the command grunt watch, however when I change my less files nothing happens.
PPS: My file structure is as follows:
root
-- public
-- less
-- css
As you can see above my main less file is located at root/public/less/bootstrap.less and I'd like the css to be compiled at root/public/css/bootstrap.css
Many thanks
Your setup seems to be good but I found a problem here... may be it solves your Question
"public/css/bootstrap.css": "./public/less/bootstrap.less"
^^
your url is same but in second appearance you have add extra "./" I think if you remove this it will work.
This is my own code and it is working fine.
module.exports = function(grunt){
grunt.initConfig({
//pkg:grunt.file.readJSON('package.json'),
less:{
development:{
options:{
compress: true,
yuicompress: true,
optimization: 2
},
files:{
'webroot/css/meer/index/index2.css' : 'webroot/css/meer/index/index2.less'
}
}
},
watch: {
styles:{
options:{
livereload: true,
spawn: false,
event: ['added','deleted','changed']
},
files:['webroot/css/meer/index/*.less'],
tasks:['less']
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default',['watch']);
}