First I'm trying to use this solution from Stack Overflow. I got everything to work except the last part when I try to watch the files. What I'm trying to accomplish is to watch for changes to my sass files and build a new style.css prefix and minify for each change and on save I can preview the changes in browser.
I would like to use only the npm, no Gulp or Grunt please.
{
"name": "name",
"version": "version",
"description": "",
"main": "index.js",
"scripts": {
"prebuild:css": "node-sass src/main.scss css/style.css ",
"build:css": "postcss --use autoprefixer -b 'last 2 versions' < css/style.css | postcss --use cssnano > css/style.min.css ",
"build": "npm run prebuild:css && npm run build:css ",
"watch": "watch 'npm run build' src/* "
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.2.5",
"cssnano": "^4.1.10",
"node-sass": "^5.0.0",
"postcss": "^8.2.8",
"postcss-cli": "^8.3.1",
"watch": "^1.0.2"
}
}
In your package.json file change the watch script to this:
"watch": "watch 'npm run build' './src'"
Related
name: Cannot uglify bootstrap.min.js file
about: Error when I try to uglify the bootstrap.min.js file
Uglify version ("uglify-js": "3.16.2",)
Bootstrap Version - bootstrap 5
Code in the contactus.html
<!-- build:js js/main.js -->
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- endbuild -->
JavaScript output or error produced.
when I try to uglify the bootstrap.min.js file Below error will be shown.
D:\Web Dev\Full-Stack Web Development with React Specialization\Front-End Web UI Frameworks and Tools Bootstrap 4\week01\Introduction To Bootstrap\Bootstrap4\conFusion>npm run usemin
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
> confusion#1.0.0 usemin
> usemin contactus.html -d dist --htmlmin -o dist/contactus.html
undefined:1625
throw new JS_Parse_Error(message, filename, line, col, pos);
^
JS_Parse_Error [SyntaxError]: Unexpected token: punc ([)
at JS_Parse_Error.get (eval at <anonymous> (D:\Web Dev\Full-Stack Web Development with React Specialization\Front-End Web UI Frameworks and Tools Bootstrap 4\week01\Introduction To Bootstrap\Bootstrap4\conFusion\node_modules\usemin\node_modules\uglify-js\tools\node.js:27:1), <anonymous>:86:23)
at getStackString (node:internal/util/inspect:1213:37)
at formatError (node:internal/util/inspect:1283:15)
at formatRaw (node:internal/util/inspect:962:14)
at formatValue (node:internal/util/inspect:817:10)
at inspect (node:internal/util/inspect:347:10)
at afterInspector (node:internal/errors:782:14) {
filename: 'node_modules\\bootstrap\\dist\\js\\bootstrap.min.js',
line: 6,
col: 357,
pos: 600
}
My package.json file if you need the versions of my packges
{
"name": "confusion",
"version": "1.0.0",
"description": "This is a website for Ristorante Con Fusion",
"main": "index.html",
"scripts": {
"start": "npm run watch:all",
"test": "echo \"Error: no test specified\" && exit 1",
"lite": "lite-server",
"scss": "node-sass -o css/ css/",
"watch:scss": "onchange \"/css/*.scss\" -- npm run scss",
"watch:all": "parallelshell \"npm run lite\" \"npm run watch:scss\"",
"clean": "rimraf dist",
"copyfonts": "copyfiles -f node_modules/#fortawesome/fontawesome-free/webfonts/* dist/fonts",
"imagemin": "imagemin img/* -o dist/img",
"usemin": "usemin contactus.html -d dist --htmlmin -o dist/contactus.html"
},
"author": "Ginura Ransika",
"license": "ISC",
"devDependencies": {
"cssmin": "^0.4.3",
"htmlmin": "^0.0.7",
"lite-server": "^2.3.0",
"node-sass": "^7.0.1",
"onchange": "^7.1.0",
"parallelshell": "^3.0.1",
"rimraf": "^3.0.2",
"uglify-js": "^3.16.2",
"usemin-cli": "^0.6.0"
},
"dependencies": {
"#fortawesome/fontawesome-free": "^6.1.1",
"#popperjs/core": "^2.11.5",
"bootstrap": "^5.2.0-beta1",
"bootstrap-social": "^5.1.1",
"font-awesome": "^4.7.0",
"jquery": "^3.6.0",
"sass": "^1.53.0"
},
"repository": {
"type": "git",
"url": "git+https://github.com/GinuraRansika/Coursera-UI-Framework.git"
},
"bugs": {
"url": "https://github.com/GinuraRansika/Coursera-UI-Framework/issues"
},
"homepage": "https://github.com/GinuraRansika/Coursera-UI-Framework#readme"
}
ERROR
I have the bootstrap.min.js script in my contactus.html file and I wanted to use (usemin-cli) package to that contactus.html
when I run the usemin I am getting the above error when uglify-js trying to uglify the bootstrap.min.js file is there any solution for this?
I was facing the same issue. It's because uglifyjs doesn't support ES6 syntax used in bootstrap 5.
Solved it just removing bootstrap current version and installing bootstrap#4.6.0
npm remove bootstrap
npm install bootstrap#4.6.0
I'm attempting to use the mikro-orm CLI but am getting a ts-node error:
$ npx mikro-orm debug
npx: installed 280 in 14.531s
(node:19228) UnhandledPromiseRejectionWarning: Error: Cannot find module 'ts-node'Require stack:
- C:\tmp\nodejs\npm-cache\_npx\19228\node_modules\mikro-orm\dist\cli\CLIHelper.js
- C:\tmp\nodejs\npm-cache\_npx\19228\node_modules\mikro-orm\dist\cli.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1080:15)
at Function.Module._load (internal/modules/cjs/loader.js:923:27)
at Module.require (internal/modules/cjs/loader.js:1140:19)
at require (internal/modules/cjs/helpers.js:75:18)
My package.json has the following:
"scripts": {
"watch": "tsc -w",
"dev": "nodemon dist/index.js",
"start": "node dist/index.js",
"dev2": "nodemon --exec ts-node src/index.ts",
"start2": "ts-node src/index.ts",
"test": "echo \"Error: no test specified\" && exit 1",
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#types/node": "^14.6.3",
"nodemon": "^2.0.4",
"ts-node": "^9.0.0",
"typescript": "^4.0.2"
},
"dependencies": {
"#mikro-orm/cli": "^4.0.0-alpha.0",
"#mikro-orm/core": "^4.0.0-alpha.0",
"#mikro-orm/migrations": "^4.0.0-alpha.0",
"#mikro-orm/postgresql": "^4.0.0-alpha.0",
"pg": "^8.3.3"
},
"mikro-orm": {
"useTsNode": true,
"configPaths": [
"./src/mikro-orm.config.ts",
"./dist/mikro-orm.config.js"
]
}
I'm using the 'watch' and 'dev' scripts to run currently, ts-node also works fine with the script 'start2'
My folder structure is: https://i.stack.imgur.com/7BGMT.png
This is new to me and I can't figure out what the problem is. Do you know what it could be?
Thank You!
answered by #MartinAdámek 'Upgrade all packages to latest version, you are on the very first alpha, latest is rc.6'
The real answer should be that your mikro-orm configuration inside package.json says useTsNode: true. Change it to false and it wont complain about missing ts-node.
I am fresher to Electron and TypeScript. I am able to run the simple electron app using Typescript.
Now I wanted to use Splash screen. When I manually copy the image to dist folder, the splash screen comes and all work fine. How can I build the application using yarn build command so that assets folder should be copied to dist folder. My lead said that the copy should work for all platform. I have tried with the following package.json file. It is not an Angular project. It is a simple project.
{
"name": "electron-quick-start-typescript",
"version": "1.0.0",
"description": "A minimal Electron application written with Typescript",
"scripts": {
"copy": "npm run copy:assets",
"copy:assets": "cp -r assets/* dist",
"build1": "tsc -p tsconfig.json && npm run copy",
"build": "tsc -p tsconfig.json",
"build:watch": "tsc -p tsconfig.json --watch",
"copy:assets1": "copy -R /assets dist/assets/",
"copy-files": "xcopy ./assets/*.* ./dist/assets",
"build11": "tsc",
"watch": "tsc -w",
"lint": "tslint -c tslint.json -p tsconfig.json",
"start": "npm run build && electron ./dist/main.js"
},
"repository": "https://github.com/electron/electron-quick-start-typescript",
"build": {
"extraResources": [
{
"from": "./src/assets/",
"to": "dist",
"filter": [
"**/*"
]
}
]
},
"keywords": [
"Electron",
"quick",
"start",
"tutorial",
"demo",
"typescript"
],
"author": "GitHub",
"license": "CC0-1.0",
"devDependencies": {
"electron": "^9.0.4",
"tslint": "^6.1.2",
"typescript": "^3.9.5",
"#trodi/electron-splashscreen": "1.0.0",
"babel-cli": "^6.11.4",
"babel-preset-es2015": "^6.9.0",
"browser-sync": "^2.14.0"
}
}
I tried to run npm run build after installing rimraf,copyfiles,imagemin, usemin-cli, cssmin, uglifyjs and htmlmin. And then editing package.json file.
But I got the error
sh: 1: usemin: not found
Here is my Package.json file
{
"name": "confusion",
"version": "1.0.0",
"description": "This is a website for Ristorante Con Fusion",
"main": "index.html",
"scripts": {
"start": "npm run watch:all",
"test": "echo \"Error: no test specified\" && exit 1",
"lite": "lite-server",
"scss": "npx node-sass -o css/ css/",
"watch:scss": "npx onchange 'css/*.scss' -- npm run scss",
"watch:all": "concurrently 'npm run watch:scss' 'npm run lite'",
"clean": "node_modules/rimraf/bin.js dist",
"copyfonts": "copyfiles -f node_modules/font-awesome/fonts/* dist/fonts",
"imagemin": "imagemin img/* --out-dir='dist/img'",
"usemin": "usemin contactus.html -d dist --htmlmin -o dist/contactus.html && usemin aboutus.html -d dist --htmlmin -o dist/aboutus.html && usemin index.html -d dist --htmlmin -o dist/index.html",
"build": "npm run clean && npm run copyfonts && npm run imagemin && npm run usemin"
},
"author": "",
"license": "ISC",
"devDependencies": {
"cssmin": "^0.4.3",
"htmlmin": "0.0.7",
"lite-server": "^2.3.0",
"node-sass": "^4.7.2",
"onchange": "^3.3.0",
"parallelshell": "^3.0.1",
"rimraf": "^2.6.2",
"uglifyjs": "^2.4.11",
"usemin-cli": "^0.5.1"
},
"dependencies": {
"bootstrap": "^4.4.1",
"bootstrap-social": "^5.1.1",
"font-awesome": "^4.7.0",
"jquery": "^3.4.1",
"popper.js": "^1.12.9"
}
}
Tried Google, But Didn't found anything. I am using ubuntu
I think npm is not able to read the path.
I added the path
node_modules/.bin/usemin
In Place of usemin in the script above.
It Worked.
this is a problem with the usemin-cli version, upgrade to version 0.6.0, I'm doing the same course and it works
I've got 2 levels of package.json files.
Example is here:
https://github.com/justin808/react-webpack-rails-tutorial
The reason is that the top level is a Rails App, and I'm putting all node tools under a directory called client, with it's own package.json file. The top level package.json file is a convenience as well as a hook for the node buildpack to run the npm install script.
I've got an example of forwarding the gulp command. Any way to generically forward anything not found from the top level package.json to the child one?
Top Level package.json.
{
"name": "react-webpack-rails-tutorial",
"version": "1.1.1",
"description": "Code from the React Webpack tutorial.",
"main": "server.js",
"engines": {
"node": "0.10.32"
},
"scripts": {
"postinstall": "cd ./client && npm install",
"gulp": "cd ./client && npm run gulp"
},
"repository": {
"type": "git",
"url": "https://github.com/justin808/react-webpack-rails-tutorial.git"
},
"keywords": [
"react",
"tutorial",
"comment",
"example"
],
"author": "justin808",
"license": "MIT",
"bugs": {
"url": "https://github.com/justin808/react-webpack-rails-tutorial/issues"
},
"homepage": "https://github.com/justin808/react-webpack-rails-tutorial"
}
Subdirectory package.json
{
"name": "react-webpack-rails-tutorial",
"version": "1.1.0",
"description": "Code from the React Webpack tutorial.",
"main": "server.js",
"engines": {
"node": "0.10.32"
},
"repository": {
"type": "git",
"url": "https://github.com/justin808/react-webpack-rails-tutorial.git"
},
"keywords": [
"react",
"tutorial",
"comment",
"example"
],
"author": "justin808",
"license": "MIT",
"bugs": {
"url": "https://github.com/justin808/react-webpack-rails-tutorial/issues"
},
"homepage": "https://github.com/justin808/react-webpack-rails-tutorial",
"dependencies": {
"babel-core": "^5.0.8",
"babel-loader": "^5.0.0",
"body-parser": "^1.12.2",
"es5-shim": "^4.1.0",
"imports-loader": "^0.6.3",
"jquery": "^2.1.3",
"loader-utils": "^0.2.6",
"marked": "^0.3.3",
"react": "^0.13.1",
"react-bootstrap": "^0.20.1",
"sleep": "^2.0.0",
"webpack": "^1.7.3"
},
"devDependencies": {
"babel-eslint": "^2.0.2",
"bootstrap-sass": "^3.3.4",
"bootstrap-sass-loader": "^1.0.3",
"css-loader": "^0.9.1",
"eslint": "^0.18.0",
"eslint-plugin-react": "^2.0.2",
"expose-loader": "^0.6.0",
"express": "^4.12.3",
"file-loader": "^0.8.1",
"gulp": "^3.8.11",
"gulp-eslint": "^0.8.0",
"node-sass": "^2.1.1",
"react-hot-loader": "^1.2.4",
"sass-loader": "^0.6.0",
"style-loader": "^0.9.0",
"url-loader": "^0.5.5",
"webpack-dev-server": "^1.8.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server.js",
"gulp": "gulp"
}
}
You can use npm run scripts to simplify the transaction (see npm-scripts). In the parent package.json:
"scripts": {
...
"client-build": "cd client && npm run build"
}
Where the client has a package.json with the npm run build command for building the client-side code.
Then invoke npm run client-build as part of the shell command of other tasks. For instance:
"scripts": {
"start": "npm run client-build && gulp some-task",
...
}
It may help to break the child project out into a separate module with its own git repo and building it through a postinstall script. In that case, when running npm install on the parent project, the child will have a chance to build itself.
you could write a batch file where you put the gulp-command. Then you have to check the errorstate. That could look like this:
#echo off
:RUN_GULP
echo Running Gulp...
gulp
goto END
:END
if %ERRORLEVEL% neq 0 goto PROCESS_ERROR
exit
:PROCESS_ERROR
cd ./client
gulp
exit;
Then you just have to call the script in your package.json like this:
"gulp": "call ./path/to/batfile.bat"
Did the same on my project....
EDIT: For all scripts.... you could create one batchfile that takes the script name as parameter. the script does the same like above, but it should work for every command.
NOTE: You have to use something like start path/to/batchfile.bat gulp instead of npm run gulp. Errorhandling do not work for npm errors!
This could look like this:
#echo off
:: Check if script is defined
set _script=%1
if "%_script%"=="" goto NO_SCRIPT_DEFINED
:START_APP
npm run %_script%
goto END
:NO_SCRIPT_DEFINED
echo ERROR: script was not defined
pause
exit
:END
if %ERRORLEVEL% neq 0 goto NO_PARENT_SCRIPT
exit
:NO_PARENT_SCRIPT
echo searching in ./client ...
cd ./client
npm run %_script%
exit