I have a feature-layer application and am writing a jshint gulp task for it.
This is the grunt task:
jshint : {
options : {
reporter : require("jshint-stylish"),
force : true
},
all : ["Gruntfile.js", "develop/modules/**/*.js", "develop/components/**/*.js"]
},
My .jshintrc file:
{
"curly" : true,
"eqeqeq": true,
"forin" : true,
"globals" : {
"angular" : false, <-- is not defined
"module" : false,
"console" : false <-- Is not defined
},
"latedef" : true,
"maxerr" : 150,
"undef": true,
"unused": true,
"strict": true
}
but the output when calling the task on the project is:
C:\Users\jason\Desktop\work\QAngular\angular>grunt jshint
Running "jshint:all" (jshint) task
develop/modules/login/login.js
line 1 col 1 Use the function form of "use strict".
line 3 col 1 'angular' is not defined.
line 12 col 13 'console' is not defined.
line 20 col 21 'angular' is not defined.
line 21 col 34 'angular' is not defined.
line 27 col 29 'console' is not defined.
line 31 col 29 'console' is not defined.
According to the documentation, the globals setting in .jshintrc is supposed to handle this. Its not. Are there any possibilities I missed
grunt-contrib-jshint does not use .jshintrc by default, you have to ask for it explicitly by setting jshint.options.jshintrc to true or a filepath (https://www.npmjs.com/package/grunt-contrib-jshint#jshintrc):
jshint : {
options : {
jshintrc: true,
reporter : require("jshint-stylish"),
force : true
},
all : ["Gruntfile.js", "develop/modules/**/*.js", "develop/components/**/*.js"]
},
Related
I am using tailwindcss with postcss8 (it comes with tailwind) and there is a problem trying to parse a css from a node_modules package.
is there a way to exclude these css files from being processed by postcss?
this is the error I get:
ERROR in ./node_modules/#fullcalendar/common/main.css (./node_modules/#nuxt/postcss8/node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/#nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js??ref--3-oneOf-1-2!./node_modules/#fullcalendar/common/main.css)
Module build failed (from ./node_modules/#nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js):
ParserError: Syntax Error at line: 1, column 45
at /Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#fullcalendar/common/main.css:633:3
at Parser.error (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-values-parser/lib/parser.js:127:11)
at Parser.operator (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-values-parser/lib/parser.js:162:20)
at Parser.parseTokens (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-values-parser/lib/parser.js:245:14)
at Parser.loop (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-values-parser/lib/parser.js:132:12)
at Parser.parse (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-values-parser/lib/parser.js:51:17)
at parse (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-custom-properties/index.cjs.js:47:30)
at /Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-custom-properties/index.cjs.js:333:24
at /Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#nuxt/postcss8/node_modules/postcss/lib/container.js:72:18
at /Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#nuxt/postcss8/node_modules/postcss/lib/container.js:55:18
at Rule.each (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#nuxt/postcss8/node_modules/postcss/lib/container.js:41:16)
at Rule.walk (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#nuxt/postcss8/node_modules/postcss/lib/container.js:52:17)
at /Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#nuxt/postcss8/node_modules/postcss/lib/container.js:60:24
at Root.each (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#nuxt/postcss8/node_modules/postcss/lib/container.js:41:16)
at Root.walk (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#nuxt/postcss8/node_modules/postcss/lib/container.js:52:17)
at Root.walkDecls (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#nuxt/postcss8/node_modules/postcss/lib/container.js:70:19)
at transformProperties (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-custom-properties/index.cjs.js:330:8)
# ./node_modules/#fullcalendar/common/main.css 4:14-191
# ./node_modules/#fullcalendar/common/main.js
# ./node_modules/#fullcalendar/timegrid/main.js
# ./node_modules/babel-loader/lib??ref--2-0!./node_modules/#nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./components/global/Schedule.vue?vue&type=script&lang=js&
# ./components/global/Schedule.vue?vue&type=script&lang=js&
# ./components/global/Schedule.vue
# ./node_modules/.cache/nuxt/components/index.js
# ./node_modules/.cache/nuxt/components/plugin.js
# ./node_modules/.cache/nuxt/index.js
# ./node_modules/.cache/nuxt/client.js
# multi ./node_modules/#nuxt/components/lib/installComponents.js ./node_modules/.cache/nuxt/client.js
I also had this issue. However, this is how I solve it.
Add the following to your nuxt.config.js file.
build: {
postcss: {
plugins: {
/**
* do not remove the cssnano key.
* (https://github.com/fullcalendar/fullcalendar/issues/5503)
*/
cssnano: {
preset: [
'default',
{
calc: false,
},
],
},
},
},
transpile: [
/#fullcalendar.*/, // always need for fullcalenar
],
},
To learn more about it, read this processing css with postcss, calc/var problems.
I hope this helps you. If you have solved this, please share your solution so that the community can learn from it.
The initial layout in less. It is necessary to make, that media requests were disconnected -> the basic styles we take out in app.less, media - in media.less. Now you have to compile 2 css files from them and put them in a certain place.
For a basis took [https://github.com/vikpe/react-webpack-babel-starter] here this pig. Here webpack 3, more or less a fresh reagent and so on.
I put less-loader, I prescribe in common.js
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}],
},
in the react-component I import: import 'assets / less / app.less'; and import 'assets / less / media.less';
All works, but less was not recompiled in a css-file and it was built in html. Not the same. Next, the option for selling is indicated in the docks (Typically, it is recommended that you extract the style sheets to a separate file created with ExtractTextPlugin, so your styles do not depend on JavaScript.) I change the prod.js to
// production config
const merge = require('webpack-merge');
const {resolve} = require('path');
const commonConfig = require('./common');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractLess = new ExtractTextPlugin({
filename: "[name].[contenthash].css",
disable: process.env.NODE_ENV === "development"
});
module.exports = merge(commonConfig, {
entry: './index.js',
devtool: 'source-map',
output: {
filename: 'js/bundle.[hash].min.js',
path: resolve(__dirname, '../../dist'),
publicPath: '/',
},
module: {
rules: [{
test: /\.less$/,
use: extractLess.extract({
use: [{
loader: "css-loader"
}, {
loader: "less-loader"
}],
// use style-loader in development
fallback: "style-loader",
publicPath:"/css/"
})
}]
},
plugins: [
extractLess
]
});
I start npm run start-prod and as a result:
1. All styles are written in one css file (and I need it in 2), and not the one where I pointed in publicPath.
2. In the npm-debug.log errors
0 info it worked if it ends with ok
1 verbose cli [ 'D:\\nodejs\\node.exe',
1 verbose cli 'D:\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'start-prod' ]
2 info using npm#4.0.5
3 info using node#v7.4.0
4 verbose run-script [ 'prestart-prod', 'start-prod', 'poststart-prod' ]
5 info lifecycle react-webpack-babel-starter#0.1.0~prestart-prod: react-webpack-babel-starter#0.1.0
6 silly lifecycle react-webpack-babel-starter#0.1.0~prestart-prod: no script for prestart-prod, continuing
7 info lifecycle react-webpack-babel-starter#0.1.0~start-prod: react-webpack-babel-starter#0.1.0
8 verbose lifecycle react-webpack-babel-starter#0.1.0~start-prod: unsafe-perm in lifecycle true
9 verbose lifecycle react-webpack-babel-starter#0.1.0~start-prod: PATH: D:\nodejs\node_modules\npm\bin\node-gyp-bin;F:\react-webpack-babel-starter-master-less\node_modules\.bin;C:\Users\daima\bin;D:\Git\mingw64\bin;D:\Git\usr\local\bin;D:\Git\usr\bin;D:\Git\usr\bin;D:\Git\mingw64\bin;D:\Git\usr\bin;C:\Users\daima\bin;C:\Program Files (x86)\Common Files\Intel\Shared Files\cpp\bin\Intel64;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;D:\Git\cmd;D:\nodejs;D:\Skype\Phone;C:\Program Files (x86)\QuickTime\QTSystem;D:\Visual Studio Code\bin;C:\Users\daima\AppData\Roaming\npm;D:\Git\usr\bin\vendor_perl;D:\Git\usr\bin\core_perl
10 verbose lifecycle react-webpack-babel-starter#0.1.0~start-prod: CWD: F:\react-webpack-babel-starter-master-less
11 silly lifecycle react-webpack-babel-starter#0.1.0~start-prod: Args: [ '/d /s /c', 'npm run build && node express.js' ]
12 silly lifecycle react-webpack-babel-starter#0.1.0~start-prod: Returned: code: 1 signal: null
13 info lifecycle react-webpack-babel-starter#0.1.0~start-prod: Failed to exec start-prod script
14 verbose stack Error: react-webpack-babel-starter#0.1.0 start-prod: `npm run build && node express.js`
14 verbose stack Exit status 1
14 verbose stack at EventEmitter.<anonymous> (D:\nodejs\node_modules\npm\lib\utils\lifecycle.js:279:16)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at EventEmitter.emit (events.js:191:7)
14 verbose stack at ChildProcess.<anonymous> (D:\nodejs\node_modules\npm\lib\utils\spawn.js:40:14)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at ChildProcess.emit (events.js:191:7)
14 verbose stack at maybeClose (internal/child_process.js:885:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid react-webpack-babel-starter#0.1.0
16 verbose cwd F:\react-webpack-babel-starter-master-less
17 error Windows_NT 6.1.7601
18 error argv "D:\\nodejs\\node.exe" "D:\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "start-prod"
19 error node v7.4.0
20 error npm v4.0.5
21 error code ELIFECYCLE
22 error react-webpack-babel-starter#0.1.0 start-prod: `npm run build && node express.js`
22 error Exit status 1
23 error Failed at the react-webpack-babel-starter#0.1.0 start-prod script 'npm run build && node express.js'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the react-webpack-babel-starter package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error npm run build && node express.js
23 error You can get information on how to open an issue for this project with:
23 error npm bugs react-webpack-babel-starter
23 error Or if that isn't available, you can get their info via:
23 error npm owner ls react-webpack-babel-starter
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]
How to solve my problem?
To get two css output files, you need to use two instances of the ExtractTextPlugin and configure two rules.
From the documentation
const ExtractTextPlugin = require('extract-text-webpack-plugin');
// Create multiple instances
const extractApp = new ExtractTextPlugin('stylesheets/[name]-one.css');
const extractMedia = new ExtractTextPlugin('stylesheets/[name]-two.css');
module.exports = {
module: {
rules: [
{
test: /app\.less$/,
use: extractApp.extract([ 'css-loader', 'less-loader' ])
},
{
test: /media\.less$/,
use: extractMedia.extract([ 'css-loader', 'less-loader' ])
},
]
},
plugins: [
extractApp,
extractMedia
]
};
In my karma.conf.js
plugins : [
'karma-phantomjs-launcher',
'karma-angular-filesort',
'karma-coverage',
'karma-jasmine',
'karma-ng-html2js-preprocessor',
'karma-spec-reporter',
],
coverageReporter: {
type : 'html',
dir : 'coverage/'
},
specReporter: {
maxLogLines: 10,
suppressPassed: false,
suppressFailed: false,
suppressSkipped: false,
suppressErrorSummary: false
},
// reporters: ['progress']
reporters: ['spec']
Yet when I run my tests (gulp test), the output continues to be the same as when karma used the 'progress' reporter.
What am I missing?
My config
server: {
options: {
sourceMap: true,
sourceMapFilename: '.tmp/styles/main.css.map',
sourceMapURL: '/styles/main.css.map'
},
files: {
'.tmp/styles/main.css':
'src/app/views/styles/application.less'
}
},
My structure
.tmp
src
Gruntfile.js
so after calling grunt less:server
I am getting .tmp/styles/main.css.map
with attr "sources" everywhere src/ prefix
but I want without src/ because server starts from src/*
How can I change it ?
Since version 1.0.0. grunt-contrib-less accepts the same options as the command line compiler does. You can get a list of these options by running lessc wihtout any argument on your command line:
--source-map-rootpath=X Adds this path onto the sourcemap filename and less file paths.
So you should use:
options: {
sourceMap: true,
sourceMapFilename: '.tmp/styles/main.css.map',
sourceMapURL: '/styles/main.css.map',
sourceMapRootpath: "/app/views/styles/"
}
Currently am switching between html-cov and json-cov in my gruntfile and running the command
grunt mochacov:all > coverage.html
(or)
grunt mochacov:all > coverage.json
Here is the json portion of config from my Gruntfile.js :
mochacov : {
options : {
reporter : 'json-cov',
//reporter : 'travis-cov',
require : ['should'],
timeout: 250000,
//quiet : true,
output : 'coverage.json',
},
all: ['test/test-*.js']
},
Is there anyway using which i can get both coverage.html and coverage.json in the output by default by specifying both html-cov and json-cov somehow?
Sadly, looks like by default grunt-mocha-cov doesn't support this, as the reporter only accepts a 'string' (per the docs).
Theoretically this should be possible with a grunt multitask.
I have found out the answer for the same :-
This is what we need to have in our Gruntfile.js
mochacov: {
jsoncoverage: {
options: {
reporter: 'json-cov',
//reporter : 'travis-cov',
require: ['should'],
timeout: 250000,
//quiet : true,
output: 'reports/coverage.json'
},
all: ['test/test-*.js']
},
htmlcoverage: {
options: {
reporter: 'html-cov',
//reporter : 'travis-cov',
require: ['should'],
timeout: 250000,
//quiet : true,
output: 'reports/coverage.html'
},
all: ['test/test-*.js']
}
}
//and then the following line needs to be there :
grunt.registerTask('mochacoverage', ['mochacov:jsoncoverage', 'mochacov:htmlcoverage']);
Then we can run it using grunt mochacoverage and it will do both html and json