I want to write an empty file even the destination file is empty.
Is it possible?
The error I get is "destination not written because minified css was empty".
I'm using grunt-contrib-cssmin module.
Only using grunt-contrib-cssmin, you cannot.
A good place to start when wondering about something specific to a piece of open source software: the source code itself — the task is only ~70 lines. From the source we can see the "error" you're getting:
if (min.length === 0) {
return grunt.log.warn('Destination not written because minified CSS was empty.');
}
You might want to look into "touching" the file. If you are familiar with *nix, you'll know that touch will create the file if it doesn't exist and not truncate it if it does. In Grunt (node.js) you might want to look into node-touch or grunt-exec.
As for your Gruntfile, you'd need only one of the following two tasks:
module.exports = function (grunt) {
var touch = require('touch');
grunt.initConfig({
'cssmin': {
'combine': {
'files': { 'path/to/output.css': ['path/to/input_one.css', 'path/to/input_two.css'] }
}
},
'exec': {
'touch': { 'command': 'touch path/to/output.css' }
}
});
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-exec');
grunt.registerTask('touch', touch.sync.bind(undefined, 'path/to/output.css'));
grunt.registerTask('minifycss1', ['cssmin', 'exec:touch']); // 1
grunt.registerTask('minifycss2', ['cssmin', 'touch']); // 2
};
Uses grunt-exec.
Uses node-touch.
Related
I minified my css file, but it did not get rid of
/*! important comments */.
is there a way to get rid of important comments?
I found this -
grunt-contrib-cssmin - how to remove comments from minified css
but #Rigotti answer does not work for important comments.
Thanks for your help!
Many grunt plugins will not remove the important comments as the notation /*! */ is typically used to prevent removal. However, grunt-strip-css-comment, provides the option to remove them.
You could apply the following stripCssComments Task to your minified .css file.
Gruntfile.js
module.exports = function(grunt) {
require('load-grunt-tasks')(grunt);
grunt.initConfig({
cssmin: {
// ...
},
stripCssComments: {
options: {
preserve: false // <-- Option removes important comments.
},
dist: {
files: {
// Redefine paths as necessary.
// These should probably both be the same given your scenario.
'path/to/dest/file.min.css': 'path/to/src/file.min.css'
}
}
}
});
// Define the alias to the `stripCssComments` Task after your `cssmin` Task.
grunt.registerTask('default', ['cssmin', 'stripCssComments']);
};
Install:
cd to your project directory and run:
npm i -D grunt-strip-css-comments load-grunt-tasks
Note: grunt-strip-css-comments is loaded using the plugin load-grunt-tasks instead of the typical grunt.loadNpmTasks(...) notation, so you'll need to install that too.
Unable to use min-lines option in grunt-jscpd
grunt.initConfig({
jscpd: {
javascript: {
options: {
min-lines: 3
},
path: 'lib/js/'
}
}
}
If I use as mentioned in above code, Grunt gives the error.
In documentation
https://github.com/mazerte/grunt-jscpd#min-lines
The author just mentioned min-line option but haven't shared the format, how to use it in code.
So does anyone knows what is the proper syntax for using min-line attribute
My main intention is to check duplicate code for minimum line= 8
Wrap the min-lines property in single or double quotes ("min-lines") to avoid the grunt error. The same applies for min-tokens if being used. E.g.
grunt.initConfig({
jscpd: {
javascript: {
options: {
'min-lines': 8, // <-- Include single/double quotes.
'min-tokens': 30 // <-- also for min-tokens if used.
},
path: 'lib/js/'
}
}
});
For folks that came here with a similar problem: If you are passing the config as .json via the jscpd -c path_to_json.json option:
Note that instead of "min-lines" you have to use "minLines".
I want to organize my HTML, JS, and LESS by module. I'm already using Grunt to compile *.js and *.html from my source folders.
So I configured grunt as follows:
grunt.initConfig({
less: {
ALL: {
files: { 'compiled.css': '**/*.less' }
}
}
}
But this runs into a major problem: constants and mixins from my /helper/*.less files are not accessible to other .less files.
It seems like grunt-contrib-less compiles each individual .less file, and then combines the output, but doesn't compile anything "globally".
The only solution I can think of is to create and maintain a master.less that #imports each individual .less file. But I'm trying to achieve an extremely modular build process, and I don't have to list any HTML or JS files, so I'm really hoping to find a *.less solution too!
Thanks to #seven-phases-max for the following answer!
less-plugin-glob
Allows you to use wildcards in #import statements! Works perfectly!
// master.less
#import "helpers/**/*.less";
#import "modules/**/*.less";
And all you need to add to your Grunt configuration is the plugins option:
// Gruntfile.js
grunt.initConfig({
less: {
'MASTER': {
src: 'master.less',
dest: 'master.css',
options: {
plugins: [ require('less-plugin-glob') ]
}
}
}
});
And, don't forget, npm install less-plugin-glob.
Here's one way to achieve an effortless development experience.
However, it requires a generated file and a custom task.
Auto-generate the master.less file
Create a task that generates master.less by writing an #import statement for each *.less file:
grunt.registerTask('generate-master-less', '', function() {
generateFileList({
srcCwd: 'modules',
src: '**/*.less',
dest: 'less/master.less',
header: '// THIS FILE IS AUTOMATICALLY GENERATED BY grunt generate-master-less\n',
footer: '// THIS FILE IS AUTOMATICALLY GENERATED BY grunt generate-master-less\n',
template: '#import "<%= filename %>";\n',
join: ''
});
});
function generateFileList(options) {
var _ = grunt.util._;
var files = grunt.file.expand({ cwd: options.srcCwd }, options.src);
var results = files.map(function (filename) {
return _.template(options.template, { 'filename': filename });
});
var result = options.header + results.join(options.join) + options.footer;
grunt.file.write(options.dest, result);
}
Then, use grunt-contrib-less to just build master.less.
I'm using Webpack with the extract-text-webpack-plugin.
In my project, I have some build scripts. One of the build scripts is supposed to bundle and minify CSS only. As I'm using Webpack for the other scripts, I found it a good idea to use Webpack even when I only want to bundle and minify CSS.
It's working fine, except that I can't get rid of the output.js file. I don't want the resulting webpack output file. I just want the CSS for this particular script.
Is there a way to get rid of the resulting JS? If not, do you suggest any other tool specific for handling CSS? Thanks.
There is an easy way, no extra tool is required.
There is an easy way and you don't need extra libraries except which you are already using: webpack with the extract-text-webpack-plugin.
In short:
Make the output js and css file have identical name, then the css file will override js file.
A real example (webpack 2.x):
import path from 'path'
import ExtractTextPlugin from 'extract-text-webpack-plugin'
const config = {
target: 'web',
entry: {
'one': './src/one.css',
'two': './src/two.css'
},
output: {
path: path.join(__dirname, './dist/'),
filename: '[name].css' // output js file name is identical to css file name
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}
]
},
plugins: [
new ExtractTextPlugin('[name].css') // css file will override generated js file
]
}
Unfortunately, that is currently not possible by design. webpack started as a JavaScript bundler which is capable of handling other "web modules", such as CSS and HTML. JavaScript is chosen as base language, because it can host all the other languages simply as strings. The extract-text-webpack-plugin is just extracting these strings as standalone file (thus the name).
You're probably better off with PostCSS which provides various plugins to post-process CSS effectively.
One solution is to execute webpack with the Node API and control the output with the memory-fs option. Just tell it to ignore the resulting js-file. Set the output.path to "/" in webpackConfig.
var compiler = webpack(webpackConfig);
var mfs = new MemoryFS();
compiler.outputFileSystem = mfs;
compiler.run(function(err, stats) {
if(stats.hasErrors()) { throw(stats.toString()); }
mfs.readdirSync("/").forEach(function (f) {
if(f === ("app.js")) { return; } // ignore js-file
fs.writeFileSync(destination + f, mfs.readFileSync("/" + f));
})
});
You can clean up your dist folder for any unwanted assets after the done is triggered. This can be easily achieved with the event-hooks-webpack-plugin
//
plugins: [
new EventHooksPlugin({
'done': () => {
// delete unwanted assets
}
})
]
Good Luck...
I want to add a grunt task (specifically angular-template) to my lineman application.js file. There is some documentation found here and here. However, it just tells me to add the grunt task to loadNpmTasks. The problem is that from a fresh project created using lineman, my application.js file does not have a loadNpmTasks array, nor do the comments point out where I should put it. Both examples I have found in the documentations do not show what the application.js file should look like in it's entirety.
The application.js file should look something like this (obviously the src/dest options are not configured correctly:
module.exports = function(lineman) {
return {
loadNpmTasks:['grunt-angular-templates'],
ngtemplates: {
app: {
src: '**.html',
dest: 'templates.js'
}
}
};
};
Then to run the task:
lineman grunt ngtemplates