I have three files:
'selectize.default.css'
'selectize.pagination.css'
'selectize.patch.css'
and I want to minimize them.
Here is my gruntfile:
cssmin: {
min: {
files: [{
expand: true,
cwd: 'css',
src: [
'selectize.default.css',
'selectize.pagination.css',
'selectize.patch.css',
'!*.min.css'
],
dest: 'release/css',
ext: '.min.css'
}]
}
}
Problem is there is only one file named selectize.min.css
I don't want it to minimize only one file. How can I minimize all three of them?
So this ticket is kind of old, but as Peng Lin so eloquently stated above, the selected answer is inadequate for most programmers since it requires too much manual adjustment. It's not maintainable.
Grunt has a way of specifying where the extension dot is in file names. By default, it's set to the first one which effectively changes the file names on output. The property is called extDot. You can read about it Here if you want.
If you set it to last, it will preserve your file names and your original example will work.
Example:
cssmin: {
min: {
files: [{
expand: true,
cwd: 'css',
src: [
'selectize.default.css',
'selectize.pagination.css',
'selectize.patch.css',
'!*.min.css'
],
dest: 'release/css',
ext: '.min.css',
extDot: 'last' // Extensions in filenames begin after the last dot
}]
} }
Hope this helps someone in the future.
If I understand your question correctly, you want to minimize the files, but not combine them into one? In that case, my recommendation would be to make separate calls for each file. e.g.:
cssmin: {
default: {
files: [{
expand: true,
cwd: 'css',
src: [
'selectize.default.css',
],
dest: 'release/css',
ext: '.min.css'
}]
},
pagination: {
files: [{
expand: true,
cwd: 'css',
src: [
'selectize.pagination.css',
],
dest: 'release/css',
ext: '.min.css'
}]
},
patch: {
files: [{
expand: true,
cwd: 'css',
src: [
'selectize.patch.css',
],
dest: 'release/css',
ext: '.min.css'
}]
},
}
It probably isn't the cleanest way, but it will do what you want. I haven't test this code, so be warned I don't know that it works.
Related
watch: {
css: {
files: 'source/styles/**/*.scss',
tasks: ['sass', 'autoprefixer', 'cssmin', 'clean:css'],
options: {
spawn: false,
},
},
images: {
files: 'source/assets/images/**/*.{png,jpg,gif}',
tasks: ['clean:image', 'imagemin'],
options: {
spawn: false,
},
}
}
grunt.registerTask('css', [
'sass',
'cssmin',
'clean:css'
]);
sass: {
dist: {
files: [{
expand: true,
src: ['source/styles/**/*.scss'],
dest: 'build/styles/',
ext: '.css',
flatten: true
}]
},
options: {
compass: true,
sourcemap: false
}
}
grunt.registerTask('default', [
'sass',
'cssmin',
'clean:css',
'requirejs',
'clean:js',
]);
I want to create a new gurnt task. Currenly, In my project, grunt css is working fine to build the complate packae SCSS.
I need to create a new task like grunt home, which will build a specific folder SCSS.
How can I create grunt home?
I think this should work, but i didn't test it (it will compile SCSS files from source/styles/SCSS to css in build/styles/css):
homeSass: {
dist: {
files: [{
expand: true,
src: ['source/styles/SCSS/**/*.scss'],
dest: 'build/styles/css/',
ext: '.css',
flatten: true
}]
},
options: {
compass: true,
sourcemap: false
}
}
grunt.registerTask('homebuild', [
'homeSass'
]);
Is it your are looking for? Or I misunderstand you?
so something like this you can create multiple tasks
sass2: {
dist: {
files: [{
expand: true,
src: ['source/styles/**/*.scss'],//path to different source file
dest: 'build/styles/',//path to different destination for home
ext: '.css',
flatten: true
}]
},
options: {
compass: true,
sourcemap: false
}
}
grunt.registerTask('home', [
'sass2'
]);
Now to run this you have 2 ways
1) simply say grunt home
this will only run sass compilation specific to sass2
2) now if you wants to run both the tasks grunt css and grunt home in 1 go then do this
sass: {
dist: {
files: [{
expand: true,
src: ['source/styles/**/src1.scss', 'source/styles/**/src2.scss'],
dest: 'build/styles/',
ext: '.css',
flatten: true
}]
},
options: {
compass: true,
sourcemap: false
}
}
grunt.registerTask('home', [
'sass'
]);
New to gruntjs and currently using it for moving some npm distributions to a public/js folder.
Here is the code:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
copy: {
bootstrapCss: {
src: "./node_modules/bootstrap/dist/css/bootstrap.css",
dest: "./public/css/bootstrap.css"
},
bootstrapTheme: {
src: "./node_modules/bootstrap/dist/css/bootstrap-theme.css",
dest: "./public/css/bootstrap-theme.css"
},
bootstrap: {
src: "./node_modules/bootstrap/dist/js/bootstrap.js",
dest: "./public/js/libs/bootstrap.js"
},
backbone: {
src: "./node_modules/backbone/backbone.js",
dest: "./public/js/libs/backbone.js"
},
backboneLocalstorage: {
src: "./node_modules/backbone.localstorage/backbone.localStorage.js",
dest: "./public/js/libs/backbone.localStorage.js"
},
requireJs: {
src: "./node_modules/requirejs/require.js",
dest: "./public/js/libs/requirejs.js"
},
underscore: {
src: "./node_modules/underscore/underscore.js",
dest: "./public/js/libs/underscore.js"
},
jquery: {
src: "./node_modules/jquery/dist/jquery.js",
dest: "./public/js/libs/jquery.js"
},
requireJsText: {
src: "./node_modules/requirejs-text/text.js",
dest: "./public/js/libs/requirejs-text.js"
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-copy');
// Default task(s).
grunt.registerTask('default', ['copy']);
};
Is there any way to make this code smaller, rather than have lots of individual copy commands?
Thanks
I would go about this by creating two targets in my copy configuration, one for JS and one for CSS. I would use some of the features provided by Grunt for dynamically building the files object to save me from typing and maintaining each destination path. This way, when I want to add files, I need only add their paths to the respective src array.
grunt.initConfig({
copy: {
js: {
expand: true,
cwd: './node_modules',
dest: './public/js/libs/',
flatten: true,
filter: 'isFile',
src: [
'./bootstrap/dist/js/bootstrap.js',
'./backbone/backbone.js',
'./backbone.localstorage/backbone.localStorage.js',
'./requirejs/require.js',
'./underscore/underscore.js',
'./jquery/dist/jquery.js',
'./requirejs-text/text.js'
]
},
css: {
expand: true,
cwd: './node_modules',
dest: './public/css/',
flatten: true,
filter: 'isFile',
src: [
'./bootstrap/dist/css/bootstrap.css',
'./bootstrap/dist/css/bootstrap-theme.css'
]
}
}
});
Grunt's dynamically built files objects is in the structure of:
files: [
{
expand: true, // Enable dynamic expansion.
cwd: 'lib/', // Src matches are relative to this path.
src: ['**/*.js'], // Actual pattern(s) to match.
dest: 'build/', // Destination path prefix.
ext: '.min.js', // Dest filepaths will have this extension.
extDot: 'first' // Extensions in filenames begin after the first dot
},
]
But this format does not work in grunt-injector:
injector: {
options: {
destFile : 'app/static/index.html',
ignorePath: 'app/'
},
local_dependencies: {
files: [
expand: true,
cwd: 'app/static/css/',
src: ['*.css'],
dest: '/static/css',
ext: '.css'
]
}
},
Any suggestions on how I can use Grunt's specific 'dynamically built files objects' with it?
If anyone has this issue, I guess you can not use sub categories like local_dependencies.
This worked for me:
injector: {
options: {
destFile : 'app/static/index.html',
ignorePath: 'app/'
},
files: {
expand: true,
cwd: 'app/static/css/',
src: ['*.css'],
dest: 'app/static/css',
ext: '.css'
}
},
I have the following task on my Gruntfile.js:
jade: {
dist: {
options: {
pretty: true
},
files: [{
expand: true,
flatten: false,
cwd: 'app/views',
dest: '<%= yeoman.dist %>/',
src: ['*.jade', 'views/{,*/}*.jade'],
ext: '.html'
}]
}
}
When I execute the task, the generated .html files are just dumped on the root of my dist folder completely disregarding the directory structure of the source. How can I preserve this directory structure?
Thanks,
there are some js files in static/js/
1. a.js
2. b.js
3. c.js
how to config grunt.js to get below files:
1. a.min.js
2. b.min.js
3. c.min.js
as far, I have to type specific file name:
min: {
dist: {
src: 'js/**/*.js',
dest: 'js/min/xxx.min.js'
}
}
Had the same problem and found a solution that would automatically minify all my scripts separately:
uglify: {
build: {
files: [{
expand: true,
src: '**/*.js',
dest: 'build/scripts',
cwd: 'app/scripts'
}]
}
}
In grunt 0.4 you can specify multiple dest/src pairs like this:
uglify: {
dist: {
files: {
'dist/main.js': 'src/main.js',
'dist/widget.js': 'src/widget.js'
}
}
}
Or you can use expandMapping, like this:
min: {
files: grunt.file.expandMapping(['path/*.js', 'path2/*.js'], 'destination/', {
rename: function(destBase, destPath) {
return destBase+destPath.replace('.js', '.min.js');
}
})
}
And the output:
path/test.js => destination/path/test.min.js
path2/foo.js => destination/path2/foo.min.js
This below gruntjs works for me for creating minified files for all the js files under a dir
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
build: {
files: [{
expand: true,
src: '**/*.js',
dest: 'build/scripts',
cwd: 'public_html/app',
ext: '.min.js'
}]
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
// Default task(s).
grunt.registerTask('default', ['uglify']);
};
From the grunt docs for min:
This task is a multi task, meaning that grunt will automatically
iterate over all min targets if a target is not specified.
So you can do this:
min: {
min_a: {
src: 'a.js',
dest: 'a.min.js'
},
min_b: {
src: 'b.js',
dest: 'b.min.js'
},
min_c: {
src: 'c.js',
dest: 'c.min.js'
}
There's nothing special about the name 'dist' for these tasks.
Use the ext option to name the files .min.js instead of .js
uglify: {
build: {
files: [{
expand: true,
src: '**/*.js',
dest: 'build/scripts',
cwd: 'app/scripts',
ext: '.min.js'
}]
}
}
For explicitly export some files into separate output files (in this case all.min.js and all.jquery.js) use:
uglify: {
js: {
files : {
'js/all.min.js' : [
'js/modernizr.js',
'js/vendor/modernizr-2.6.2-respond-1.1.0.min.js',
'js/bootstrap.min.js',
'js/main.js',
'js/ZeroClipboard.min.js',
'js/bootstrap-datepicker/bootstrap-datepicker.js'
],
'js/all.jquery.js' : [
'js/vendor/jquery-1.9.1.js',
'js/vendor/jquery-migrate-1.2.1.js',
'js/vendor/jquery-ui.js'
]
}
},
options: {
banner: '\n/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n',
preserveComments: 'some',
report: 'min'
}
},
I like to keep the original files and also create uglified ones:
uglify: {
dist: {
files: [{
expand: true,
src: '**/*.js',
dest: 'destdir',
cwd: 'srcdir',
rename: function(dest, src) { return dest + '/' + src.replace('.js', '.min.js'); }
}]
}
},
You also can use copy and grunt-mindirect.
copy: {
dist: {
src: 'a.js',
dest: 'a.min.js'
}
},
minidirect: {
all: 'js/min/*.min.js'
}
This should work.
I guess it only matters for watch tasks.
In grunt 0.4 you can do this
var filesA = 'a.js', filesB = 'b.js', filesC = 'c.js';
...
min: {
min_a: {
src: filesA,
dest: 'a.min.js'
},
min_b: {
src: filesB,
dest: 'b.min.js'
},
min_c: {
src: filesC,
dest: 'c.min.js'
}
watch: {
min_a: {
files: filesA,
tasks: ['min:min_a']
},
min_b: {
files: filesB,
tasks: ['min:min_b']
},
min_c: {
files: filesC,
tasks: ['min:min_c']
}
}
After that just start grunt watch and all will be fine automagically.
In an intention to help others who come to this page in future -
I came across a video which explains on how to minify JS files using Grunt JS here: https://www.youtube.com/watch?v=Gkv7pA0PMJQ
The source code is made available here: http://www.techcbt.com/Post/359/Grunt-JS/how-to-minify-uglify-javascript-files-using-grunt-js
Just in case, if the above links are not working:
You can minify all javascript files and combine/concat into one file using the following script:
module.exports = function(grunt){
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify:{
t1:{
files:{
'dest/all.min.js': ['src/app.js', 'src/one.js', 'src/t/two.js']
}
}
}
});
};
If you would like to have source maps also generated, you can enable "sourceMap" option as follows:
module.exports = function(grunt){
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify:{
t1:{
options : {
sourceMap : true,
},
files:{
'dest/all.min.js': ['src/app.js', 'src/one.js', 'src/t/two.js']
}
}
}
});
};
In order to retain entire folder structure while minifying JS files, you can use the following script:
module.exports = function(grunt){
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify:{
t1:{
files: [{
cwd: 'src/',
src: '**/*.js',
dest: 'dest/',
expand: true,
flatten: false,
ext: '.min.js'
}]
}
}
});
};