I'm using Filerev and filerev-replace to create new versions of my CSS and JS files and update the link to the appropriate file version in my HTML document. However I can't seem to get the replace part to work correctly, can someone point me in the right direction.
Current code:
filerev: {
options: {
encoding: 'utf8',
algorithm: 'md5',
length: 8
},
source: {
files: [{
src: [
'html/js/iba.min.js',
'html/css/iba.min.css'
]
}]
}
},
filerev_replace: {
options: {
assets_root: 'tmp/assets/'
},
compiled_assets: {
src: 'html/js/*.{css,js}',
src: 'html/css/*.{css,js}'
},
views: {
options: {
views_root: 'tmp/views/'
},
src: 'html/templates/default_site/layouts.group/html.html'
}
},
Related
I'm using Terser for Gruntjs to minify js files.
I want to be able to create a sourcemap but I don't know how to translate the samples I see in the options section (https://www.npmjs.com/package/terser#source-map-options) into my gruntfile.js.
Here is the section where I am minifying and I added where I think the sourceMap options go:
grunt.initConfig({
terser: {
pages: {
options: {
mangle: {
properties: false
},
sourceMap: {
// source map options goes here I think but not certain what
}
},
files: [
{ expand: true,
src: '**/*.js',
dest: 'wwwroot/js',
cwd: 'wwwroot/js',
ext: '.min.js'
}
]
}
}
});
I cannot find a gruntjs example for this anywhere so any input or help would be great
I found the answer and have tested it. Note the sourceMap entry in the options below:
grunt.initConfig({
terser: {
pages: {
options: {
mangle: {
properties: false
},
sourceMap: true
},
files: [
{ expand: true,
src: '**/*.js',
dest: 'wwwroot/js',
cwd: 'wwwroot/js',
ext: '.min.js'
}
]
}
}
});
I am quite new to grunt, literally only a few hours. I am setting up grunt to cache-bust my website using grunt-cache-breaker. Now I have got it to work when I manually type in every file source example:
grunt.initConfig({
cachebreaker: {
dev: {
options: {
match: ['.js', '.css', 'min.css'],
src: {
path: 'TEST/Apps/**/*'
}
},
files: {
src: ['TEST/Apps/AppTemplate/v1.0.0/index.html',
'TEST/Apps/Case_Attributes/v1.0.0/index.html',
'TEST/Apps/Case_CorrespondenceReferences/v1.0.0/index.html',
',
]
}
},
},
});
however what I really want to do is to be able to problematically build the list of files.src from a pre-generated text file like this:
grunt.initConfig({
cachebreaker: {
dev: {
options: {
match: ['.js', '.css', 'min.css'],
src: {
path: 'TEST/Apps/**/*'
}
},
files: {
src: function (){
return grunt.file.read('config.txt')
}
}
},
},
});
or something to this affect. Is this possible? Or am I completely off the mark?
After a few more hours of playing I came up with this solution:
module.exports = function(grunt) {
grunt.initConfig({
config: grunt.file.readJSON('config.json'),
cachebreaker: {
dev: {
options: {
match: ['.js', '.css', 'min.css'],
src: {
path: 'TEST/Apps/**/*'
}
},
files: {
src: ['<%= config %>'],
}
},
},
});
grunt.loadNpmTasks('grunt-cache-breaker');
grunt.registerTask('default', ['cachebreaker']);
};
A different and very versatile way to do that is to generate the task parameters in runtime.
Say you load the list of filenames into array list. After having called grunt.initConfig() you can do this:
grunt.config.merge({
cachebreaker: {
dev: {
files: { src: list }
}
}
}),
That is, update the config object with these other properties you want.
I have setup grunt task to concatenate the CSS files into a combined.css file and it successfully concatenates the CSS files.
grunt.initConfig({
concat: {
options: {
separator: '\n\n\n',
base: "../../../",
},
css: {
src: [ '../../my/demo/v1.0/1.css',
'../../my/demo/v1.0/2css',
'../../my/demo/v1.0/3.css',
],
dest: '../../my/demo/v1.0/combined123.css',
},
});
grunt.loadNpmTasks('grunt-concat-css');
grunt.registerTask('default', ['concat']);
However, I am not able to figure out how should I replace 1.css, 2.css and 3.css in the index.html with the combined123.css file using Grunt.
When manually trying to replacing these css files with the css files in index.html, running the grunt command reverts back the changes made to index.html. When I do the View Source Code for the page in browser, it shows the multiple css files instead of the latest concatenated combined123.css file.
How can I replace these css files with the combined123.css file in the tag of index.html, using the Grunt task.
This is the Gruntfile.js
grunt.initConfig({
root: root,
//concat:css task implemented here as mentioned in above code snippet
connect: {
server: {
options: {
port: grunt.option('port') || 9090,
keepalive: false,
base: "../../../"
}
}
},
open: {
all: {
path: 'http://localhost:<%= connect.server.options.port%>/my/demo/v1.0/dest/index.html'
}
},
watch: {
html: {
files: ['views/*.html', 'index_temp.html'],
tasks: ['mergeFiles']
},
livereload: {
files: ['dest/index.html'],
options: { livereload: true }
}
},
htmlbuild: {
dist: {
src: 'index_temp.html',
dest: '.tmp/',
options: {
beautify: true,
relative: true,
sections: {
headers: 'views/abc.html',
input: 'views/def.html',
}
}
}
},
replace: {
example: {
src: ['.tmp/index_temp.html'],
dest: 'dest/index.html',
replacements: [ {
from: /^\s*\n/gm,
to: ''
},
{
from: /\s+$/,
to: ''
}],
}
});
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-concat-css');
grunt.registerTask('server', ['mergeFiles', 'open' ,'connect', 'watch' ]);
grunt.registerTask('default', ['mergeFiles', 'open' ,'connect', 'watch', 'concat']);
grunt.registerTask('mergeFiles', ["htmlbuild:dist", "replace:example"]);
Any help would be much appreciated.
I have different options to concat JS files and CSS files.
How can I configure grunt to run such a configuration ?
This doesn't work :
concat: {
js: { // Custom options for JS
options: {
separator: '\n',
sourceMap: true,
banner: '...',
},
core: {
src: ['src/core/*.js', 'src/core/**/*.js'],
dest: 'assets/xxxx.js'
}
},
css: { // Default options for CSS
core: {
src: ['src/core/*.css', 'src/core/**/*.css'],
dest: 'assets/xxxx.css'
}
}
}
This is ugly, but it works :
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.renameTask('concat', 'concatCss');
grunt.loadNpmTasks('grunt-contrib-concat');
// The task is then loaded two times, under 'concat' and 'concatCss' names.
...
concat: {
options: {
separator: '\n',
sourceMap: true,
banner: '...',
},
core: {
src: ['src/core/*.js', 'src/core/**/*.js'],
dest: 'assets/xxxx.js'
},
concatCss: { // Default options for CSS
core: {
src: ['src/core/*.css', 'src/core/**/*.css'],
dest: 'assets/xxxx.css'
}
}
I want to compile 2 separate files with grunt recess:
recess: {
dist: {
options: {
compile: true
},
files: {
'path/css/custom.css': ['path/less/custom.less'],
'path/css/animate.css': ['path/less/antimate.less'],
},
},
},
Only the first file is compiling before grunt exits. Where am I going wrong?
You should try this
recess: {
dist: {
options: {
compile: true
},
files: [
{src: ['path/less/custom.less'], dest: 'path/css/custom.css'},
{src: ['path/less/antimate.less'], dest: 'path/css/animate.css'}
],
}
},
Or you can enable dynamic expansion to compile every .less in your folder:
recess: {
dist: {
options: {
compile: true
},
files: [
{
expand: true, // Enable dynamic expansion.
cwd: 'path/to/less', // Src matches are relative to this path.
src: ['*.less'], // Actual pattern(s) to match.
dest: 'path/to/css/', // Destination path prefix.
ext: '.css', // Dest filepaths will have this extension.
},
],
},
},
See http://gruntjs.com/configuring-tasks for more reference.
like this:
recess: {
dist: {
options: {
compile: true
},
files: {
'dist/combined.css': [
'src/main.css',
'src/component.css'
]
}
}
}