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".
Related
As the title suggests, I have been struggling to find a solution to this squiggly line problem as part of in my Svelte files.
I have looked all over the web and unforturnately I haven't yet being able to find a solution to this error in my VS Code editor.
Please note that despite this error, the imported CSS file is cascading the variables fine and all works fine, however VS Code isn't able to recognise the lang="scss" hence the squiggly line as per screenshot.
NOTE: The imported CSS file is prepended via Svelte's preprocess configs;
Here is a link to the repo holding all the configs and codes;
https://github.com/Untested/demo-svelte
My svelte.config.js (for SvelteKit) has the following and it all resolves well, leaving no squiggles. Note that if you're using vanilla Svelte (not SvelteKit), it may be configured differently.
const config = {
kit: {
adapter: adapter(),
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: '#use "src/variables.scss" as *;'
}}},
resolve: {
alias: {
...
}}}
},
preprocess: [
preprocess({
scss: {
prependData: '#use "src/variables.scss" as *;'
},
})
]
};
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.
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 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.
I'm using grunt-contrib-compass, in the settings, there are options like imagesDir and imagesPath. I'm just wondering what's that for, and how do I use it?
So apparently that options to be used in conjunction with compass URL Helpers. If you've specified imagesDir in your Gruntfile.js, you can call a compass function images-url() to generate the path to your images folder.
For example, this is how you specify the Gruntfile.js:
compass: {
build: {
options: {
cssDir: './source/css/',
sassDir: './source/css/',
imagesDir: './source/images/',
force: true,
outputStyle: 'expanded',
}
}
}
And this is how you call the function from your scss file:
background-image: image-url( 'test.png' );
When you run the task, it'll be compiled into:
background-image: url('/./source/images/test.png');
Same thing applies for fontsDir, you just need to call different compass function font-url(). If you want to find more details, please follow the link http://compass-style.org/reference/compass/helpers/urls/
I'm not sure how much clearer it can get than what the docs have
[imagesDir](https://github.com/gruntjs/grunt-contrib-compass#imagesdir)
Type: String
The directory where you keep your images.
and
[imagesPath](https://github.com/gruntjs/grunt-contrib-compass#imagespath)
Type: String
Default: images
The directory where the images are kept. It is relative to the projectPath.
Maybe the definitions from Compass's configuration reference would be helpful too?
images_dir: The directory where the images are kept. It is relative to the project_path. Defaults to "images".
images_path: The full path to where images are kept. Defaults to <project_path>/<images_dir>.
You can specify these just like any other option in your Gruntfile.js:
compass: {
staging: {
options: {
imagesDir: 'images'
}
}
}
Note: these are typically used for compiling correct paths to images when you've used the compass image-url helper.