Use tslint-eslint-rules with Gulp.js - npm

Objective: Use TSLint to lint any TS files in the project done using VS 2015
I set up a gulp task as follows (from Setup TSLint in Visual Studio 2015):
//The actual task to run
gulp.task("TSLint:All", function () {
return gulp.src(TYPE_SCRIPT_FILES)
.pipe(plumber())
.pipe(tslint())
.pipe(tslint.report(
"verbose", {
emitError: false,
reportLimit: 50
}));
});
Things were working fine. Now I want to use the tslint-eslint-rules rules for linting.
I do the following
Install the eslint-eslint-rules package as shown on https://github.com/buzinas/tslint-eslint-rules
Create file called tslint.json as shown below
{
"rulesDirectory": "node_modules/tslint-eslint-rules/dist/rules",
"rules": {
"no-constant-condition": true
}
}
Change my Gulp task as follows
gulp.task("TSLint:All", function () {
return gulp.src(TYPE_SCRIPT_FILES)
.pipe(plumber())
.pipe(tslint({
configuration: "tslint.json"
}
))
.pipe(tslint.report(
"verbose", {
emitError: false,
reportLimit: 50
}));
});
I start getting the following error (I believe for every error flagged by Linter):
Plumber found unhandled error:
SyntaxError: Unexpected token
How can I correct this ?

Related

How to add service worker to Vue.js project?

I'm trying to use a service worker in my Vue.js project. I have it functioning with a very basic worker that I just dropped into my public/ directory (example below), but this doesn't allow me to load dependencies using require(), which is what I'd like to do next.
self.addEventListener('install', event => {
self.skipWaiting();
console.log(self)
});
self.addEventListener('fetch', function(event) {
const url = new URL(event.request.url);
console.log(url)
})
I found service-worker-loader, but it presents me with this during compilation: Syntax Error: TypeError: Cannot read property 'unlink' of null. The error persists even when I provide a serviceWorker.js file that is completely blank. My vue.config.js has the loader configured:
module.exports = {
configureWebpack: {
module: {
rules: [
{ test: /serviceWorker\.js$/, use: { loader: "service-worker-loader" }}
]
}
}
}
And I'm referencing my worker using import registerServiceWorker from 'service-worker-loader!./serviceWorker';.
Am I missing something basic? What's the "standard" way to include custom service worker code into a Vue.js project?

How do you remove console.log from a build using the JS Quasar Framework?

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.

ERROR Invalid options in vue.config.js: "build" is not allowed. "dev" is not allowed

I have an existing vue-cli 2 app that I'm attempting to upgrade to vue-cli-3. After adding my unique dependencies, I dropped src/ right into the newly created vue-cli-3 app and started up. woot!
How do I manage [PROD|DEV|TEST].env.js now that we use vue.config.js?
I got the following error because my first attempt to create a vue.config.js was to simply rename config/index.js to be /vue.config.js and keep the existing /config/[PROD|DEV|TEST].env.js but I got the following error:
ERROR Invalid options in vue.config.js: "build" is not allowed. "dev"
is not allowed error Command failed with exit code 1.
I don't understand how environments are now managed.
Thanks for your time!
May be you should use devServer instead. And for build I guess there is another name now.
For example:
module.exports = {
devServer: {
// your settings
}
}
For example:
module.exports = {
devServer: {
proxy: {
'/api': {
target: '<url>',
ws: true,
changeOrigin: true
},
'/foo': {
target: '<other_url>'
}
}
}
}
Reference: vue-cli

grunt-bowercopy produces warning - No files copied

I've set Grunt to compile compass with watch task and now I'd like to copy useful files from bower_components/... - e.g. bower_components/jquery/jquery.min.js, because bower produces a lot of unnecessary files, which I want to get rid of, when uploading to server.
CMD produces warning and stops process;
Reading C:\Users\sjiamnocna\Documents\NetBeansProjects\PM_new\node_modules\grunt-bowercopy\package.json...OK
Parsing C:\Users\sjiamnocna\Documents\NetBeansProjects\PM_new\node_modules\grunt-bowercopy\package.json...OK
Reading bower.json...OK
Parsing bower.json...OK
Loading "bowercopy.js" tasks...OK
+ bowercopy
Loading "gruntfile.js" tasks...OK
+ default, dog
No tasks specified, running default tasks.
Running tasks: default
Running "default" task
Running "bowercopy" task
Running "bowercopy:copythat" (bowercopy) task
Verifying property bowercopy.copythat exists in config...OK
File: [no files]
Options: srcPrefix="bower_components", destPrefix="files", ignore=[], report, runBower=false, clean=false, copyOptions={}
Using srcPrefix: bower_components
Using destPrefix: files
Warning: Nothing was copied for the "copythat" target Use --force to continue.
My gruntfile:
module.exports = function (grunt) {
grunt.initConfig({
watch: {
scss: {
files: ['files/style/sass/*.scss'],
tasks: ['compass']
}
},
compass: {
dist: {
options: {
sassDir: 'files/style/sass',
cssDir: 'files/style',
environment: 'development'
}
}
},
bowercopy: {
copythat: {
options: {
runBower: false,
srcPrefix: 'bower_components',
destPrefix: 'files'
},
script: {
'jquery/dist/jquery.min.js': 'script/lib/jquery.min.js',
'jquery-ui/jquery-ui.min.js': 'script/lib/jquery-ui.min.js',
'masonry/dist/masonry.pkgd.min.js': 'script/lib/masonry.pkgd.min.js',
'sweetalert/dist/sweetalert.min.js': 'script/lib/sweetalert.min.js'
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-bowercopy');
grunt.registerTask('default', ['bowercopy']);
grunt.registerTask('dog', ['watch']);
};
Can anyone tell me what's wrong? Or, is there any other way to do it with grunt (automatically :) )?
Thanks #cartant for comment, it was one of the mistakes I've made - using whatever instead of "files"
I've changed position of resource and target
Wrong:
'source':'target'
improved:
'target':'source'
Works!

GULP LESS Imports not working in gulp-less npm

Having used Gulp all the time for 2 last years, I've suddenly got a problem with the less file imports and just can not resolve it.
I've tried more then 5 combinations, such as from SmashingMagazine, from gulp-less homepage, etc... none worked for me.
The problem is (error log in console output):
C:\wamp\www\lumenframe>gulp less
[10:23:25] Using gulpfile C:\wamp\www\lumenframe\Gulpfile.js
[10:23:25] Starting 'less'...
Potentially unhandled rejection [2] '/bower_components/animate.css/animate.css' wasn't found. Tried - /bower_components/animate.css/animate.c
ss,bower_components\bootstrap\less\bower_components\animate.css\animate.css,bower_components\animate.css\bower_components\animate.css\animate
.css,bower_components\font-awesome\less\bower_components\animate.css\animate.css in file C:\wamp\www\lumenframe\bower_components\assets\l
ess\appstrap.less line no. 43
Gulpfile.js looks like this:
// Init Gulp
var gulp = require('gulp');
// Dependencies
var less = require('gulp-less'),
concat = require('gulp-concat'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify'),
autoprefixer = require('gulp-uglify');
// Folder paths
var jsdir = './bower_components/assets/js/',
jspub = './public/assets/js/',
lessdir = './bower_components/assets/less/',
lesspub = './public/assets/css/';
// LESS compiler
gulp.task('less', function () {
return gulp.src(lessdir + 'frontend.less')
.pipe(less({
compress: true,
paths: [
'./bower_components/bootstrap/less/',
'./bower_components/animate.css/',
'./bower_components/font-awesome/less/'
]
}))
.pipe(autoprefixer('last 10 versions', 'ie 9'))
.pipe(gulp.dest(lesspub));
});
// Concatenate and Minify JS
gulp.task('scripts', function () {
return gulp.src(jsdir + '*.js')
.pipe(concat('appstrap.js'))
.pipe(gulp.dest(jspub))
.pipe(rename('appstrap.min.js'))
.pipe(uglify())
.pipe(gulp.dest(jspub));
});
// Filewatcher for changes
gulp.task('watch', function () {
gulp.watch(jsdir + '*.js', ['scripts']);
gulp.watch(lessdir + '*.less', ['less']);
});
// Default Task combination
gulp.task('default', ['less', 'scripts', 'watch']);
All files are in their proper place, so they exists. And once I do #import appstrap.less, it comes out with the error **Potentially unhandled rejection [2].
frontend.less looks like this:
// Core source files of the whole frontend plugins
#import (once) "appstrap.less";
.btn{
color: #ff0000;
display: block;
}
Any visible errors ?