Grunt/Yeoman Multiple Gruntfile.js Files - gruntjs

My goal is the be able to build my project to two separate build folders, each with its' own Grunt tasks.
I noticed the grunt-cli has the --gruntfile option which allows you to specify another Gruntfile to use. So far, I have a Gruntfile.js working perfectly (near stock from Yeoman). Also, I have another Gruntfile2.js sitting alongside.
Gruntfile.js
var yeomanConfig = {
app: 'app',
dist: '../www_browser'
};
Gruntfile2.js
var yeomanConfig = {
app: 'app',
dist: '../www'
};
grunt build is meant to run Gruntfile.js, and does so perfectly.
grunt build --gruntfile Gruntfile2.js is meant to run Gruntfile2.js, and does so with some hiccups. (supposed to build to ../www folder NOT ../www_browser folder)
The --gruntfile directive builds to the proper folder for almost every task except grunt-usemin and gunt-contrib-htmlmin. I know this because of this output to the console here:
Running "usemin:css" (usemin) task
Processing as CSS - ../www_browser/styles/22f60055.main.css
Running "concurrent:dist" (concurrent) task
Running "htmlmin:dist" (htmlmin) task
File ../www_browser/404.html created.
File ../www_browser/index.html created.
You'll notice the ../www_browser, here in console output. Every other task runs in the expected ../www folder.
Is this a usemin cache thing? Grunt cache thing? Or do some tasks simply run from the default Gruntfile.js regardless of the --gruntfile Gruntfile2.js directive?
I have given up on trying to do multiple targets from a single Gruntfile for now. There are too many dependencies in Yeoman's Gruntfile.js that don't yet support multiple build targets, and I spent 12 hours to no avail with that approach.
Version Info
$: grunt --version
grunt-cli v0.1.9
grunt v0.4.1
$: npm --version
1.2.25
$: yo --version
1.0.3
package.json
{
"name": "myapp",
"version": "0.0.0",
"dependencies": {},
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-copy": "~0.4.1",
"grunt-contrib-concat": "~0.1.3",
"grunt-contrib-coffee": "~0.6.5",
"grunt-contrib-uglify": "~0.2.0",
"grunt-contrib-compass": "~0.2.0",
"grunt-contrib-jshint": "~0.4.1",
"grunt-contrib-cssmin": "~0.6.0",
"grunt-contrib-connect": "~0.2.0",
"grunt-contrib-clean": "~0.4.0",
"grunt-contrib-htmlmin": "~0.1.3",
"grunt-bower-requirejs": "~0.4.1",
"grunt-contrib-requirejs": "~0.4.0",
"grunt-contrib-imagemin": "~0.1.3",
"grunt-contrib-watch": "~0.4.0",
"grunt-rev": "~0.1.0",
"grunt-usemin": "~0.1.10",
"grunt-mocha": "~0.3.0",
"grunt-open": "~0.2.0",
"grunt-svgmin": "~0.1.0",
"grunt-concurrent": "~0.1.0",
"matchdep": "~0.1.1",
"connect-livereload": "~0.2.0"
},
"engines": {
"node": ">=0.8.0"
}
}

It looks like you're using an older version of grunt-concurrent, which doesn't seem to be passing the grunt flags through to the child-processes.
See here: https://github.com/sindresorhus/grunt-concurrent/blob/v0.1.0/tasks/concurrent.js#L11
On the current version of the plugin, the flags are passed, see here: https://github.com/sindresorhus/grunt-concurrent/blob/v0.3.1/tasks/concurrent.js#L22
So, I suggest updating your version of grunt-concurrent:
npm install grunt-concurrent#latest --save-dev

Related

Deploy Storybook on Netlify with Nextjs

I am trying to deploy my Storybook on Netlify, I'm using Next.js framework but it fails every time and I don't know what is wrong
Netlify configuration :
Build command: npm run build-storybook
Publish directory: storybook-static
My package.json:
{
"homepage": "https://github.com/alexCoding42/tailwind-storybook",
"name": "tailwind-storybook",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"dependencies": {
"next": "10.0.9",
"react": "17.0.1",
"react-dom": "17.0.1"
},
"devDependencies": {
"#babel/core": "^7.13.10",
"#netlify/plugin-nextjs": "^3.0.3",
"#storybook/addon-actions": "^6.2.0-alpha.22",
"#storybook/addon-essentials": "^6.2.0-alpha.22",
"#storybook/addon-links": "^6.2.0-alpha.22",
"#storybook/react": "^6.2.0-alpha.22",
"#types/node": "^14.14.35",
"#types/react": "^17.0.3",
"babel-loader": "^8.2.2",
"gh-pages": "^3.1.0",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-preset-env": "^6.7.0",
"prettier": "^2.2.1",
"tailwindcss": "^2.0.4",
"typescript": "^4.2.3"
}
}
The error I get on Netlify:
Plugin "#netlify/plugin-nextjs" internal error
Error: No static assets found in .next dist (aka no /.next/static). Please check your project configuration. Your next.config.js must be one of serverless or experimental-serverless-trace. Your build command should include next build.
I have also tried to add a netlify.toml at the root of my project with this config:
[build]
command = "npm run build-storybook"
publish = "storybook-static"
[[plugins]]
package = "#netlify/plugin-nextjs"
And added #netlify/plugin-nextjsas dev dependency of package.json but I get the same error...
Can someone help me on this please ?
I had a similar problem but not with the storybook but with nx + nextjs.
If I tried to deploy the app to the netlify I got the same error.
So I changed next.config.js in the root directory and add to distDir path to generated .static folder and it's working now.
and this is my netlify.toml ss
The Netlify Next.js plugin isn't required for a Storybook build. In fact, no plugins are required; the only configuration needed is, as OP says:
Build command: npm run build-storybook
Publish directory: storybook-static
Or, in netlify.toml:
[build]
command = "npm run build-storybook"
publish = "storybook-static"
No [[plugins]] fields are needed.
If Netlify is configured through the UI, go to https://app.netlify.com/sites/my-awesome-site/plugins and remove the Next.JS plugin.

No files matching the pattern .s?(c|a)ss" were found on Sage

When I try to run Sage 9.0.10 in my Wordpress 5.5.3 theme and install Yarn and then do "yarn build" or "yarn start" I get this error:
PS C:\xampp\htdocs\patrick.visiegroep\wp-content\themes\visiegroep> yarn build
yarn run v1.22.5
$ webpack --progress --config resources/assets/build/webpack.config.js
Error: No files matching the pattern "C:\xampp\htdocs\patrick.visiegroep\wp-content\themes\visiegroep\resources\assets\**\*.s?(c|a)ss" were found.
at C:\xampp\htdocs\patrick.visiegroep\wp-content\themes\visiegroep\node_modules\stylelint\lib\standalone.js:212:12
at processTicksAndRejections (internal/process/task_queues.js:97:5)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
PS C:\xampp\htdocs\patrick.visiegroep\wp-content\themes\visiegroep>
With "build" and "start" always I get
Error: No files matching the pattern "C:\xampp\htdocs\patrick.visiegroep\wp-content\themes\visiegroep\resources\assets\**\*.s?(c|a)ss"
and I can't find what went wrong, because it used to work before I had to nuke my whole installment of Wordpress and Sage. After reinstalling this happens.
I had the same issue, i've updated only 3 dev dependeinces . i took them from sage 9.0.9
so i updated
"stylelint": "^13.7.2",
"stylelint-config-standard": "^20.0.0",
"stylelint-webpack-plugin": "^0.10.5",
to
"stylelint": "^8.4.0",
"stylelint-config-standard": "~18.2.0",
"stylelint-webpack-plugin": "^0.10.5",
of course removed old node_modules folder, and launched yarn. works like a charm.
Ran into the same problem and couldn't find an answer for weeks.
There is a problem with the StyleLintPlugin. What have I done is this:
Open webpack.config.js file in theme-name/resources/assets/build
Ctrl + F for "StyleLintPlugin"
Comment out this section of code
new StyleLintPlugin({
failOnError: !config.enabled.watcher,
syntax: "scss",
})
I don't think that this is the best option, but it worked for me. If anyone else has a better one, please let us know.
This happened to me also with the latest version of Sage. Could not get it running no matter what. Ended up using these older dependencies in my package.json:
"devDependencies": {
"autoprefixer": "~8.2.0",
"browser-sync": "~2.24.7",
"browsersync-webpack-plugin": "^0.6.0",
"bs-html-injector": "~3.0",
"buble-loader": "^0.4.1",
"cache-loader": "~1.2.5",
"clean-webpack-plugin": "^0.1.18",
"copy-globs-webpack-plugin": "^0.2.0",
"cross-env": "^7.0.2",
"css-loader": "^0.28.9",
"cssnano": "~4.0.5",
"eslint": "~4.19.1",
"eslint-loader": "~1.9",
"eslint-plugin-import": "~2.14.0",
"extract-text-webpack-plugin": "~3.0.2",
"file-loader": "^1.1.6",
"friendly-errors-webpack-plugin": "^1.6.1",
"imagemin-mozjpeg": "~7.0.0",
"imagemin-webpack-plugin": "~2.2.0",
"import-glob": "~1.5",
"node-sass": "~4.9.4",
"postcss-loader": "~2.1.0",
"postcss-safe-parser": "~3.0",
"resolve-url-loader": "~2.3.1",
"rimraf": "~2.6",
"sass-loader": "~6.0",
"style-loader": "^0.22.1",
"stylelint": "^8.4.0",
"stylelint-config-standard": "~18.2.0",
"stylelint-webpack-plugin": "^0.10.5",
"uglifyjs-webpack-plugin": "^1.3.0",
"url-loader": "^0.6.2",
"webpack": "~3.10.0",
"webpack-assets-manifest": "^1.0.0",
"webpack-dev-middleware": "~2.0.4",
"webpack-hot-middleware": "~2.22.3",
"webpack-merge": "~4.1.4",
"yargs": "~11.0.0"
},
Used node version 8.11.3, then performed clean install so
remove package-lock.json
remove node_modules
then npm install
then it finally worked!
In case you are running on windows and get error Python2 not found in PATH,
open powershell with administrative rights
run npm install --global windows-build-tools (it will install python easily)
then repeat the process above
Good luck mate!

Task Runner Explorer ASP.NET - Block-scoped declarations not yet supported outside strict mode

I have been getting this error for days now and I am not sure how to fix it.
When I run the "dev" package in Node Task Runner Explorer it gives this error.
It seems to be something to do with different versions of node and webpack not getting along. the error message, and my packages.json file are below, as is the link to the article I am working through.
setting-up-a-react-environment-for-aspnet-mvc-44la
Error Message
C:\DevFolder\MyApplication> cmd.exe /c npm run dev --color=always
asp.net#1.0.0 dev C:\DevFolder\MyApplication
webpack --mode development --watch C:\DevFolder\MyApplication\node_modules\webpack\bin\webpack.js:90 let
notify = ^^^ SyntaxError: Block-scoped declarations (let, const,
function, class) not yet supported outside strict mode
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:374:25)
at Object.Module._extensions..js (module.js:405:10)
at Module.load (module.js:344:32)
at Function.Module._load (module.js:301:12)
at Function.Module.runMain (module.js:430:10)
at startup (node.js:141:18)
at node.js:980:3 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! asp.net#1.0.0 dev: `webpack --mode development --watch` npm ERR!
Exit status 1 npm ERR! npm ERR! Failed at the asp.net#1.0.0 dev
script. npm ERR! This is probably not a problem with npm. There is
likely additional logging output above.
package.json
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"scripts": {
"build": "webpack",
"dev": "webpack --mode development --watch"
},
"devDependencies": {
"#babel/cli": "^7.7.5",
"#babel/core": "^7.7.5",
"#babel/plugin-proposal-class-properties": "^7.7.4",
"#babel/preset-env": "^7.7.6",
"#babel/preset-react": "^7.7.4",
"babel-loader": "^8.0.6",
"browser-sync": "^2.26.7",
"browser-sync-webpack-plugin": "^2.2.2",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-notifier": "^1.8.0"
},
"dependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0",
"npm": "6.12.1",
"node" : "5.3.0"
}
}
Webpack Config
"use strict";
var path = require("path");
var WebpackNotifierPlugin = require("webpack-notifier");
var BrowserSyncPlugin = require("browser-sync-webpack-plugin");
module.exports = {
entry: "./Scripts/ApplicationReact/ApplicationReact.js",
output: {
path: path.resolve(__dirname, "./Scripts/"),
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
},
devtool: "inline-source-map",
plugins: [new WebpackNotifierPlugin(), new BrowserSyncPlugin()]
};
Summary
Don't install the Node.js nuget package, it breaks your project and it will remain broken after you have removed it. Just let the general installation of node do the work.
Detail
When in any other directory, if I did "node -v" in the command line and it would return version 12.13.1
When in my project folder if I did "node -v" it would return 5.3.0
When I removed the Node.js nuget package I thought it would default to the system version but instead it just said "cannot find the file or command specified" (or something along those lines).
I had copied the whole of our software to another folder for the purposes of this exercise. I just branched to another folder and this time the "node -v" was coming back with 12.13.1
I carried on with the exercise and the error did not appear. I am not sure how to fix it once you get into this state.
Better answers?
This isn't a great answer and I won't mark it as the answer. If anyone can provide a plausible explanation for what is going on here, and a way to cure your project from the nuget node lurgy, I will mark it as the answer.

npm install not installing any packages

Im trying to test an old project, and when i run npm install, all i get is:
npm WARN package.json xx# No repository field.
npm WARN package.json xx# No license field.
My package.json file looks like this:
{
"name": "xx",
"version": "",
"dependencies": {},
"devDependencies": {
"connect-livereload": "~0.3.2",
"grunt": "~0.4.1",
"grunt-bg-shell": "~2.3.1",
"grunt-contrib-csslint": "^0.2.0",
"grunt-contrib-sass": "^0.8.1",
"grunt-contrib-uglify": "^0.6.0",
"grunt-contrib-watch": "~0.5.3",
"grunt-newer": "^0.8.0",
"grunt-ngrok": "^0.2.2",
"load-grunt-tasks": "~0.2.1",
"time-grunt": "~0.2.7"
},
"engines": {
"node": ">=0.8.0"
}
}
I havent run this kind of install in a while and im afraid im forgetting something, any ideas as to what ?
EDIT: it turns out the folder copy i had of the project had already a node_modules folder with everything installed, reason why running npm install wasnt doing anything. Although i thought there would be some kind of warning or message saying all modules are installed already.
Getting the warning is not a concern. If you can see a structure of npm packages being installed after the warning, then it works fine. In case you want to avoid these warning, you can add respository and license fields to your package.json.
"repository": {
"type": "git",
"url": "git://github.com/user/repo.git"
},
"license": "ISC"
You are missing a bracket from the end
{
"name": "xx",
"version": "",
"dependencies": {},
"devDependencies": {
"connect-livereload": "~0.3.2",
"grunt": "~0.4.1",
"grunt-bg-shell": "~2.3.1",
"grunt-contrib-csslint": "^0.2.0",
"grunt-contrib-sass": "^0.8.1",
"grunt-contrib-uglify": "^0.6.0",
"grunt-contrib-watch": "~0.5.3",
"grunt-newer": "^0.8.0",
"grunt-ngrok": "^0.2.2",
"load-grunt-tasks": "~0.2.1",
"time-grunt": "~0.2.7"
},
"engines": {
"node": ">=0.8.0"
}
}
I sugges you to use npm init then install the packages by the cli-tool
for eg:
save to devDepencies
npm install connect-livereload grunt grunt-bg-shell ... --save-dev
save to depencies
npm install express ... --save
read more at: https://docs.npmjs.com/cli/install
It turns out the folder copy i had of the project had already a node_modules folder with everything installed, reason why running npm install wasnt doing anything. Although i thought there would be some kind of warning or message saying all modules are installed already.

No provider for "framework:jasmine"! (Resolving: framework:jasmine)

When I run the command grunt I get the following warning:
Running "karma:unit" (karma) task
Warning: No provider for "framework:jasmine"! (Resolving: framework:jasmine) Use --force to continue.
Does anybody know how to resolve this issue?
I had the same error after creating a new project the yeoman angular generator (yo angular).
The solution for me was adding "karma-jasmine" to the devDependencies in packages.json and running "npm install" again.
npm install karma-jasmine --save-dev
This solved the error message "No provider for “framework:jasmine”!"
I also had to add a karma browser launcher to the devDependencies, as I got the message that no launcher was installed (see http://karma-runner.github.io/0.10/config/browsers.html).
npm install karma-safari-launcher --save-dev
My packages.json looked like this after my action:
{
"name": "test1",
"version": "0.0.0",
"dependencies": {},
"devDependencies": {
"grunt": "~0.4.1",
"grunt-autoprefixer": "~0.4.0",
"grunt-bower-install": "~0.7.0",
"grunt-concurrent": "~0.4.1",
"grunt-contrib-clean": "~0.5.0",
"grunt-contrib-coffee": "~0.7.0",
"grunt-contrib-compass": "~0.6.0",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-connect": "~0.5.0",
"grunt-contrib-copy": "~0.4.1",
"grunt-contrib-cssmin": "~0.7.0",
"grunt-contrib-htmlmin": "~0.1.3",
"grunt-contrib-imagemin": "~0.3.0",
"grunt-contrib-jshint": "~0.7.1",
"grunt-contrib-uglify": "~0.2.0",
"grunt-contrib-watch": "~0.5.2",
"grunt-google-cdn": "~0.2.0",
"grunt-newer": "~0.5.4",
"grunt-ngmin": "~0.0.2",
"grunt-rev": "~0.1.0",
"grunt-svgmin": "~0.2.0",
"grunt-usemin": "~2.0.0",
"jshint-stylish": "~0.1.3",
"load-grunt-tasks": "~0.2.0",
"time-grunt": "~0.2.1",
"karma-ng-scenario": "^0.1.0",
"grunt-karma": "^0.8.0",
"karma": "^0.12.0",
"karma-jasmine": "~0.2.2",
"karma-safari-launcher": "~0.1.1",
"karma-ng-html2js-preprocessor": "^0.1.0"
},
"engines": {
"node": ">=0.8.0"
},
"scripts": {
"test": "grunt test"
}
}
I changed the following line in karma.conf en karma-e2e.conf to use the karma-safari-launcher:
browsers: ['Safari'],
I hope this will work for you, too.
As #Taco said, the default solution for this problem is installing the appropriate plugin, like this: npm install karma-jasmine --save-dev or this: npm install karma-mocha --save-dev.
However, this error is also expected when you are running an old version of karma-cli because they updated the way karma loads the plugins. To make sure you have the latest version, run this:
npm install -g karma-cli
My problem was in my karma.config.js file:
plugins: [require("karma-webpack")]
This caused the other karma-* plugins not to be loaded, which includes karma-jasmine.
If your karma.conf.js specifies a plugins attribute, be sure to add karma-jasmine to the list. If all the plugins are prefixed with karma-, you don't need to specify this attribute as the plugins will be automatically loaded.
It happened to me because I had Karma installed globally, and when I ran karma start command it actually ran in /usr/... rather than my dev directory.
In my case the solution was to remove karma and install karma-cli instead.
npm remove -g karma
npm install -g karma-cli
My problem was the selected "Karma package" in the IntelliJ run configuration. I did not select the project's karma package in the project's "node_module" folder:

Resources