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> ]
}))
Related
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 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'));
});
I´m trying to setup a build workflow using the aforementioned technologies, but I´m getting the following error, which seems very generic upon running tests on karma:
TypeError: 'undefined' is not an object (evaluating 'a.Sifter=b()')
This happens even without adding any ECMSA6 specific feature. The same workflow works fine without the transpiling phase in the workflow.
What I tried was to set the babeljs after a concatenation phase and before executing a uglifying on it, like the following snippet:
var defaultTasks = [
"sass:prod", // compile scss sources
"cleanAll", // clean folders: preparing for copy
"copyAll", // copying bower files
"cssmin:customVendor", // minify and concat 'customized from vendor' css
"concat:vendorStyles", // concat vendors's css + minified 'customized from vendor' and distribute as 'css/vendor.css'
"uglify:rawVendors", // minifies unminified vendors
"concat:vendorScripts", // concat vendors's scripts and distribute as 'scripts/vendor.js'
"ngAnnotate:app", // ng-annotates app's scripts
"concat:appScripts", // concat app's (customized from vendor's + ng-annotated + customer's)
"babel",// uses babeljs to convert brandnew ES6 javascript into ES5 allowing for old browsers
"uglify:app" // minify app script and distribute as 'scripts/app.js'
];
if (!skipTest) {
defaultTasks.push("karma:target"); // run tests on minified scripts
}
The imporant definitions are shown:
babel: {
options: {
"presets": ['es2015']
},
dist: {
files: {
"<%= concat.appScripts.dest %>": "<%= concat.appScripts.dest %>"
}
}
},
uglify: {
options: {
mangle: {
except: [
"jQuery", "angular", "tableau", "LZString", "moment", "Moment", "Modernizr",
"app", "modules"
]
}
},
app: {
files: [{
src: ["<%= concat.appScripts.dest %>"],
dest: "<%= app.dist %>/scripts/app.js"
}]
}
},
I´ve tested the transpile a bit, running the default logic from babel url, and it works well, converting basic stuff.
Is there any better workflow that I could use to still run the tests against the same code that would be executed for real?
Thanks
In the end, the workflow was correct.
I just need to modify the filesets a bit in order to avoid transpiling the selectize.js file (which wasn´t really needed).
However, not sure why it was breaking
That solved to me, so I´m closing the question, but perhaps might be useful for someone else.
error: Parsing error: Unexpected token ..
My lint gulp task is giving me issues on '.js' files, while '.jsx' are doing fine on ES6 syntax.
Notably, the "..." operator - for spread/rest etc.
Is there a way to get this to work? Here is part of my config. (I tried adding ".js: true", didn't help)
{
"parser":"espree",
"ecmaFeatures":{
"modules":true,
"jsx":true
},
You probably want to enable the experimentalObjectRestSpread parser option:
{
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true,
"modules": true
}
}
Since Espree is already the default parser, you don't need to specify it unless you want to for clarity's sake.
I am trying to get Wallaby to work with a TypeScript app, using Browserify and Wallabify. However, when I run Wallaby, it outputs No failing tests, 0 passing, and all test indicators are grey.
The file app/spec.setup.ts is responsible for loading node modules dependencies such as chai, sinon, and the app's main module. app/spec.util.ts provides some helpers, imported by individual spec files.
module.exports = function() {
var wallabify = require('wallabify');
var wallabyPostprocessor = wallabify({
entryPatterns: [
'app/spec.setup.ts',
'app/src/**/*.spec.ts'
]
}
);
return {
files: [
{pattern: 'app/spec.setup.ts', load: false, instrument: false},
{pattern: 'app/spec.util.ts', load: false, instrument: false},
{pattern: 'app/src/**/*.ts', load: false},
{pattern: 'app/src/**/*.spec.ts', ignore: true}
],
tests: [
{pattern: 'app/src/**/*.spec.ts', load: false}
],
testFramework: 'mocha',
postprocessor: wallabyPostprocessor,
bootstrap: function (w) {
// outputs test file names, with .ts extensions changed to .js
console.log(w.tests);
window.__moduleBundler.loadTests();
}
};
};
What's interesting is that I don't get any feedback from changing entryPatterns, even setting it to an empty array or invalid file names. The result is still the same. Only if I remove it entirely, I get errors such as Can't find variable: sinon.
I've also figured that the entryPatterns list may need the compiled file names, i.e. .js instead of .ts extension. However, when I do that, I get Postprocessor run failure: 'import' and 'export' may appear only with 'sourceType: module' on spec.setup.ts.
I don't know what is the correct way to configure Wallabify for TypeScript compilation, and I couldn't find any complete examples on the web, so I'd appreciate any hints.
P.S. with my current StackOverflow reputation I couldn't add two new tags: wallaby and wallabify. Could someone do me a favour and add the two tags please.
Because TypeScript compiler renames files to .js and applied before wallabify, you need to change your entry patterns like this to make it work:
entryPatterns: [
'app/spec.setup.js',
'app/src/**/*.spec.js'
]