I want use https://github.com/just-boris/less-plugin-glob this plugin for multi importing less files.
When I run
lessc --glob styles.less styles.css
from terminal - it's work fine, but I dont understand how I could run this command like gulp-task for every style build?
Use the plugins option to pass the plugin to gulp-less. Example:
gulp.task('less', function () {
return gulp.src('./less/**/*.less')
.pipe(less({
plugins: [ require('less-plugin-glob') ]
}))
.pipe(gulp.dest('./dist/css'));
});
Related
I'm working on a legacy site that has some pre-set-up Gulp commands.
I want to compile some .less files into .css. The existing script is as such:
gulp.task('less', function(){
return gulp.src('./src/css/less/app.less')
.pipe(less({
paths: [ path.join(__dirname, 'less', 'includes') ]
}))
.pipe(gulp.dest('./src/css/'))
});
However, when I run this I get an error:
Error: File not found with singular glob: /src/css/less/app.less (if this was purposeful, use `allowEmpty` option)
I've checked all paths, all #import and directories and they're all ok.
I am using Gulp Local: 4.0.0, CLI: 2.3.0.
Would anyone know could be causing this?
Maybe later, but Gulp 4 has a new syntax for writing tasks.
Also, you have to fix the wrong path to the source file:
// gulpfile.js
const SRC = 'src';
const DIST = 'src';
function lessTask(cb) {
return src(SRC + '/less/app.less')
.pipe(less())
.pipe(dest(DIST + '/style.css'));
}
exports.default = series(lessTask);
# On terminal:
gulp
I am trying the Quasar Framework (for those not familiar, it's based on Vue) and it's going well. However I've tried running a build (npm run build) and get repeated:
error Unexpected console statement no-console
... so the build fails because it sees console.log(...) and is not happy. My options:
don't use console.log in development. But it's handy.
comment out the eslint rule that presumably enforces that, so letting console.log into production. But that's not ideal for performance/security.
have the build automatically remove any console.log. That's what I'm after.
But how?
I took a look at the build https://quasar.dev/quasar-cli/cli-documentation/build-commands and it mentions using webpack internally and UglifyJS too. Given that, I found this answer for removing console.log in a general Vue/webpack project: https://github.com/vuejs-templates/webpack-simple/issues/21
... but if that's how, where does that go within Quasar since there is no webpack config file? I imagine in the quasar.conf.js file (since I see an 'extendWebpack' line in there - sounds promising). Or is there a better way to do it? How do other people remove console.log in production when using Quasar? Or handle logging without it?
Thanks!
https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
quasar.conf.js:
module.exports = function (ctx) {
return {
...
build: {
...
uglifyOptions: {
compress: { drop_console: true }
}
},
}
}
The above will result in configuring terser plugin with the following:
terserOptions: {
compress: {
...
drop_console: true
},
(https://github.com/terser/terser#compress-options)
(you can see the generated config with quasar inspect -c build -p optimization.minimizer)
You still also need to remove the eslint rule to avoid build errors, see https://github.com/quasarframework/quasar/issues/5529
Note:
If you want instead to configure webpack directly use:
quasar.conf.js:
module.exports = function (ctx) {
return {
...
build: {
...
chainWebpack (chain) {
chain.optimization.minimizer('js').tap(args => {
args[0].terserOptions.compress.drop_console = true
return args
})
}
},
}
}
It will do the same as above.
See https://quasar.dev/quasar-cli/cli-documentation/handling-webpack
and https://github.com/neutrinojs/webpack-chain#config-optimization-minimizers-modify-arguments
https://github.com/quasarframework/quasar/blob/dev/app/lib/webpack/create-chain.js#L315
1 Edit package.json in Vue's project what had created it before.
2 Then find "rules": {}.
3 Change to this "rules":{"no-console":0}.
4 if you Vue server in on, off it and run it again. Then the issue will be done.
As an alternative I can suggest using something like loglevel instead of console.log. It's quite handy and allows you to control the output.
I have a simple project generated with vue-cli. When I run the vue-cli-service build command it produces CSS file correctly. When I run the vue-cli-service build --watch command it only builds JavaScript files. There are no CSS files.
How can I generate CSS files in watch mode?
You can achieve this by adding this line of code in your vue.config.js
//vue.config.js
module.exports = {
//adding extract css true solves this issue
css: {
extract: true
}
}
https://cli.vuejs.org/config/#css-extract
There is a good chance that you have to use an extract plugin for webpack.
I know that in my vue.config.js file I'm using :
chainWebpack: config => {
if (config.plugins.has('extract-css')) {
const extractCSSPlugin = config.plugin('extract-css');
extractCSSPlugin &&
extractCSSPlugin.tap(() => [
{
filename: 'build.css',
chunkFilename: 'build.css'
}
]);
}
}
Hopefully this help you. However vue inject your css in watch mode right at the top of your file for automatic re-rendering purpose I think.
I'm trying to migrate the following browserify workflow into a single gulp task:
package.json:
"scripts": {
"build": "browserify src/main.js > dist/build.js"
},
...
"browserify": {
"transform": [
"vueify",
"babelify"
]
}
.babelrc file:
{
"presets": ["es2015"]
}
Since gulp-browserify is now longer maintained, I used this recipe to get the whole workflow into a single gulp task:
gulp.task('build', function () {
var b = browserify({
entries: './src/main.js',
debug: true,
transform: [vueify, babelify.configure({presets: ["es2015"]})]
});
return b.bundle()
.pipe(source('build.js'))
.pipe(buffer())
.on('error', gutil.log)
.pipe(gulp.dest('./dist/'));
});
Unfortunately, the generated build.js files are different and only the build.js file generated by the command npm run build is running my Vue.js App properly.
I just managed to get past this problem myself. After spending a bit of time in the debugger I found that the array of transforms used by browserify contained 'babelify' and 'vueify' twice.
What happens then is probably that the transforms are applied like so: bablify -> vueify -> babelify -> vueify. I didn't spend much time figuring out exactly how that blew up my stuff since the problem is easy enough to get rid of.
Either specify browserify transforms in package.json OR in your gulp file. Not both.
We're using gulp-less to compile LESS files to css. The problem is that we have calc() statements in the less files which we want the less compiler to copy over to the css as-is, instead of evaluating them during compilation.
When invoking lessc from the command line, this is easily done using
lessc --strict-math=on
But how to do it from the gulp script?
I've tried adding the option to the task parameter, like so:
gulp.task('less', function() {
return gulp.src(<my less files>)
.pipe(less({
'strict-math': 'on', // this is what I tried to add
paths : [ <my less paths> ]
}))
.pipe(gulp.dest(<my css path>));
});
.. but to no avail. Is it possible? Any work-arounds or alternatives if not?
Dash separated named options are in camelCase in javascript, try this :
.pipe(less({
strictMath: 'on', // this is what you have to do
paths : [ <my less paths> ]
}))