trying to make it so that the package picks up this:
function(){}
and corrects it to:
function () {
}
Try adding this line in the js block of your .jsbeautifyrc file
"space_after_anon_function": true
Related
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 use gulp to compile my sass file to css files, and reference the css file in my html. The project support theme switch. For example, I have 3 css theme files:
red.css
yellow.css
blue.css
I can currently switch the theme css like this:
var styleDom = $('#theme-style');
var newHref = 'styles/themes/' + themeName + '.css';
if (styleDom.attr('href') !== newHref) {
styleDom.attr('href', newHref);
}
Now I want to use webpack to load the css file.
require('styles/themes/red.css');
It seems work well, but I cannot find a way to switch the theme css file now, does anyone have a solution?
Your approach doesn’t need to change. Just use Extract Text plugin to save out the CSS files. You’ll need to make multiple entry points to create multiple CSS files.
OR
More ideally, (the approach I would take) make your CSS switch based on a different html or body class and just change the class. It won’t add much overhead, and it will be a more ideal UX when changing themes.
You'll need to use a combination of webpacks style-loader and file-loader (second example ) and use require.ensure (second example "dynamic imports") to accomplish this:
function switchTheme(name) {
// Remove the current theme stylesheet
// Note: it is important that your theme css always is the last
// <link/> tag within the <head/>
$('head link[rel="stylesheet"]').last().remove();
// Since webpack needs all filePaths at build-time
// you can't dynamically build the filePath
switch(name) {
case 'red':
// With require.ensure, it is possible to tell webpack
// to only load the module (css) when require is actually called
return require.ensure([], function () {
require('style-loader/url!file-loader!styles/themes/red.css');
});
case 'yellow':
return require.ensure([], function () {
require('style-loader/url!file-loader!styles/themes/yellow.css');
});
case 'blue':
return require.ensure([], function () {
require('style-loader/url!file-loader!styles/themes/blue.css');
});
default:
throw new Error('Unknown theme "' + name + '"');
}
}
Then a call like switchTheme('blue') should do the trick.
And you might have to check your current webpack.config.js, in case you already have configured a loader for .css files.
I am using gulp-concat-css to combine a selected list of CSS into one. My project folder structure look like this:
[]Project Folder
gulpfile.js
---[]public
------[]assets
---------[]libs (All bower install libraries such as bootstrap will be placed here)
---------[]css (All my custom CSS including the combined CSS will be placed here)
Now, my gulp task look something like this:
gulp.task('concatcss', function() {
return gulp.src(['public/assets/libs/bootstrap/dist/css/bootstrap.min.css',
'public/assets/libs/angular-motion/dist/angular-motion.min.css',
'public/assets/libs/bootstrap-additions/dist/bootstrap-additions.min.css',
'public/assets/libs/blueimp-file-upload/css/jquery.fileupload.css',
'public/assets/css/mycustom.css'])
.pipe(concatCss("css/all.css").on('error', standardHandler))
.pipe(minifyCss().on('error', standardHandler))
.pipe(gulp.dest('public/assets'));
});
The problem is the final output come with the wrong url rebase. This cause the CSS URL is pointing to the wrong path of files. For example, the original URL from the bootstrap.min.css is url('../fonts/glyphicons-halflings-regular.woff'). Now, the combined CSS come with the URL of url(../../fonts/glyphicons-halflings-regular.woff), which is wrong. It should be url(../libs/bootstrap/dist/fonts/glyphicons-halflings-regular.woff)
According to gulp-concat-css documentation, it says "for a proper import inlining and url rebase, make sure you set the proper base for the input files".
How can I set the proper base for the input files to get the correct url rebase?
You have to set the base as option in gulp.src like this { base: 'public/assets' }:
gulp.task('concatcss', function() {
return gulp.src(['public/assets/libs/bootstrap/dist/css/bootstrap.min.css',
'public/assets/libs/angular-motion/dist/angular-motion.min.css',
'public/assets/libs/bootstrap-additions/dist/bootstrap-additions.min.css',
'public/assets/libs/blueimp-file-upload/css/jquery.fileupload.css',
'public/assets/css/mycustom.css'], { base: 'public/assets' })
.pipe(concatCss("css/all.css").on('error', standardHandler))
.pipe(minifyCss().on('error', standardHandler))
.pipe(gulp.dest('public/assets'));
});
I am using gulp concat to combine all JavaScript libraries CSS file into one. My gulp task looks something like this:
gulp.task('concatcss', function() {
return gulp.src('assets/libs/**/*.css')
.pipe(concatCss("all.css").on('error', standardHandler))
.pipe(minifyCss().on('error', standardHandler))
.pipe(gulp.dest('dist'));
});
It does work to combine all CSS into one. However, the problem is as the path is changed, any CSS linked file such as url("../fonts/glyphicons-halflings-regular.woff") will fail to load.
How can I overcome the issue? Is there anyway for it to automatically change the path based on the new output CSS file location?
You need to set concatcss options rebaseUrls to false, its true by default
rebaseUrls: (default true) Adjust any relative URL to the location of the target file.
Example:
concatCss(targetFile, {rebaseUrls:false})
In your own case:
gulp.task('concatcss', function() {
return gulp.src('assets/libs/**/*.css')
.pipe(concatCss("all.css", {rebaseUrls:false}).on('error', standardHandler))
.pipe(minifyCss().on('error', standardHandler))
.pipe(gulp.dest('dist'));
});
Other Options (since 2.1.0)
inlineImports: (default true) Inline any local import statement found
rebaseUrls: (default true) Adjust any relative URL to the location of the target file.
includePaths: (default []) Include additional paths when inlining imports
NB:
for a proper import inlining and url rebase, make sure you set the proper base for the input files.
You have to add the base option to gulp.src like this: { base: 'dist' }
Your code reworked:
gulp.task('concatcss', function() {
return gulp.src('assets/libs/**/*.css', { base: 'dist'})
.pipe(concatCss("all.css").on('error', standardHandler))
.pipe(minifyCss().on('error', standardHandler))
.pipe(gulp.dest('dist'));
});
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.