I have scss files which I want to convert to css then run autoprefixer, then minify the whole thing.
I came to this code:
"devDependencies": {
"autoprefixer": "^9.7.2",
"cssnano": "^4.1.10",
"node-sass": "^4.13.0",
"npm-run-all": "^4.1.5",
"postcss": "^7.0.23",
"postcss-cli": "^6.1.3",
"watch": "^1.0.2"
},
"scripts": {
"scss": "node-sass -o www/css src/scss",
"prefix": "postcss --use autoprefixer -b 'last 2 versions' < www/css/websiteStyles.css | postcss --use cssnano > www/css/websiteStyles.min.css",
"dev": "npm-run-all scss prefix",
"watch" : "watch 'npm run dev'"
},
When I run npm run watch the script runs infinitely. I don't change anything but the script runs and runs and then runs ageain. What did I do wrong?
Related
I've been trying to run a sass project with the following devDependencies and Scripts. When i try to run npm run start, it fails with an error as shown in the screenshot.
package.json file :
"main": "index.js",
"scripts": {
"watch:sass": "node-sass sass/main.scss css/style.css -w",
"devserver": "live-server",
"start": "npm-run-all --parallel devserver watch:sass",
"compile:sass": "node-sass sass/main.scss css/style.comp.css",
"prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.concat.css -o css/style.prefix.css",
"compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed",
"build:css": "npm-run-all compile:sass concat:css prefix:css compress:css"
},
"author": "name",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^7.1.4",
"concat": "^1.0.3",
"live-server": "^1.2.1",
"node-sass": "^4.5.3",
"npm-run-all": "^4.1.1",
"postcss-cli": "^4.1.1"
}
And I get the below response when tried to run npm run start
Output Image
I use node v14.17.3, and npm 8.3.0.
Intentional bug from the developer of color.js https://github.com/Marak/colors.js/issues/285 that is being worked on. Pin to 1.4.0 or set a resolution as described in https://github.com/Marak/colors.js/issues/285#issuecomment-1008168237
After installing laravel mix via terminal and running the command cp node_modules/laravel-mix/setup/webpack.mix.js ./ I'm getting this error.
cp : Cannot find path 'C:\Users\COBNETCKNN\Local Sites\portofolio\app\p
ublic\wp-content\themes\wp-portofolio\node_modules\laravel-mix\setup\we
At line:1 char:1
+ cp node_modules/laravel-mix/setup/webpack.mix.js ./
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ CategoryInfo : ObjectNotFound: (C:\Users\COBNET...\webp
ack.mix.js:String) [Copy-Item], ItemNotFoundException
+ FullyQualifiedErrorId : PathNotFound,Microsoft.PowerShell.Comman
ds.CopyItemCommand
I also looked inside node_modules/laravel-mix/setup/ and there was no webpack.mix.js so I couldn't pull it from there, did the directory changed or what happened? Can I copy webpack.mix.js from my previous projects and modify it for my needs?
For non-Laravel standalone projects, you should do the following.
mkdir my-app && cd my-app
npm init -y
npm install laravel-mix --save-dev
Create a Mix config file within the root of your project.
touch webpack.mix.js
Open webpack.mix.js and add the following code:
// webpack.mix.js
let mix = require('laravel-mix');
mix.js('src/app.js', 'dist').setPublicPath('dist');
Compile with npx mix or npm run dev.
Your webpack.mix.js should not be in /node-modules, it needs to be in the root of your project instance.
Your package.json should look more like the following with the latest version of Laravel Mix.
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.15.2",
"autoprefixer": "^10.2.4",
"browser-sync": "^2.26.14",
"browser-sync-webpack-plugin": "^2.3.0",
"cross-env": "^7.0.3",
"laravel-mix": "^6.0.11",
"postcss": "^8.2.4",
"sass": "^1.32.6",
"sass-loader": "^10.1.1",
"tailwindcss": "^2.0.2",
"vue-template-compiler": "^2.6.12"
}
}
Managed to solve it by lowering version of the Laravel Mix, it looks like in latest version you just don't get webpack.mix.js in your node_modules after installing laravel mix, something that should be tackled by the team... So solution for this is that inside your package.json file copy these dependencies below
"devDependencies": {
"autoprefixer": "^9.8.6",
"browser-sync": "^2.26.13",
"browser-sync-webpack-plugin": "^2.0.1",
"cross-env": "^7.0.3",
"laravel-mix": "^5.0.9",
"postcss": "^7.0.35",
"sass": "^1.30.0",
"sass-loader": "^8.0.2",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.0.1",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"#fortawesome/fontawesome-free": "^5.15.1"
}
This is from my old project package.json file, after setting this up you just install laravel mix again via npm install laravel-mix --save-dev and then run cp node_modules/laravel-mix/setup/webpack.mix.js ./ which will pull webpack.mix.js from your node_modules
I'm developing a svelte+tailwind+PHP site with rollup.js. How can I set a variable in the svelte source files depending on if I'm running npm run dev or npm run build? I'd like the different builds to connect to different back-end servers.
This is my package.json in case that's relevant. I'm new to most of these tools, so please bear with me and correct me if I've misunderstood too much. After running npm run build, I run a script that scp's the build folder to the production server.
{
"name": "my-app",
"version": "1.0.0",
"scripts": {
"watch:tailwind": "postcss public/tailwind.css -o public/index.css -w",
"build:tailwind": "NODE_ENV=production postcss public/tailwind.css -o public/index.css",
"dev": "run-p autobuild watch:tailwind",
"build": "npm run build:tailwind && rollup -c",
"start": "sirv public --single --host",
"start:dev": "sirv public --single --dev",
"autobuild": "rollup -c -w"
},
"devDependencies": {
"#rollup/plugin-commonjs": "^16.0.0",
"#rollup/plugin-node-resolve": "^10.0.0",
"autoprefixer": "^10.0.4",
"d3-interpolate": "^2.0.1",
"npm-run-all": "^4.1.5",
"postcss": "^8.1.10",
"postcss-cli": "^8.3.0",
"postcss-nested": "^5.0.1",
"postcss-reporter": "^7.0.2",
"rollup": "^2.3.4",
"rollup-plugin-css-only": "^3.0.0",
"rollup-plugin-livereload": "^2.0.0",
"rollup-plugin-svelte": "^7.0.0",
"rollup-plugin-terser": "^7.0.0",
"svelte": "^3.0.0",
"svelte-dnd-action": "^0.6.22",
"svelte-loading-spinners": "^0.1.1",
"tailwindcss": "^2.0.1"
},
"dependencies": {
"sirv-cli": "^1.0.0"
}
}
You can use #rollup/plugin-replace:
A Rollup plugin which replaces strings in files while bundling.
plugins: [
replace({
// alternatively, one could pass process.env.NODE_ENV or 'development` to stringify
'process.env.NODE_ENV': JSON.stringify('production')
})
]
say I've go this scaffolding : https://github.com/vuejs/vue-cli
I want to add Webpack 3.8.1 to it.
there's already a "build" folder with lots of webpack files in it :
but (one of) the issue(s) is running "webpack" in the project's root returns :
https://webpack.js.org/concepts/ this si the doc I'm supposed to go by.
there's no real example.
it's got :
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};
which I adapted to the best of my ability to :
const path = require('path');
module.exports = {
entry: './src/entry.js',
output: {
path: path.resolve(entry, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};
I also added a entry.js file containing nothing under src :
and I edited my package.json file to include:
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"node-sass": "^4.5.3",
"sass-loader": "^3.2.3",
"style-loader": "^0.19.0",
"extract-text-webpack-plugin": "^3.0.1"
},
"devDependencies": {
"sinon": "^4.0.1",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.3",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
and ran :
npm install
npm update
I feel I'm getting somewhat close but I still cannot manage to use the new webpack.
I put my comment as answer to be able to close this question and (hopefuly) help others future users.
I think that your problem is to try to use webpack, you should use the npm run script like: npm run dev or npm run prod, and then the vue+webpack will do the work for you, placing the files where the config says (webpack.base.dev.conf for instance).
If you take a look at package.json, you could see this part:
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
},
Every one can be executed with npm run X.
Hope it helps!
I'm trying to use straight up npm as my build tool.
{
"name": "ang-starter",
"version": "1.0.0",
"description": "",
"main": "index.js",
"jshintConfig": {
"predef": ["angular"]
},
"scripts": {
"autoprefixer": "postcss -u autoprefixer -r src/assets/css/*",
"scss": "node-sass --output-style compressed -o src/assets/css src/assets/sass/main.scss",
"jshint": "jshint src/app/*.js",
"uglify": "uglifyjs src/app/*.js -o src/assets/js/app.min.js",
"serve": "browser-sync start --server --files 'src/assets/css/, src/assets/js/*.js, **/*.html, !node_modules/**/*.html'",
"watch:css": "onchange 'src/assets/sass/*.scss' -- npm run scss",
"watch:js": "onchange 'src/app/**/*.js' -- npm run jshint && npm run uglify",
"watch:all": "npm-run-all -p serve watch:css watch:js watch:images",
"postinstall": "npm run build:all && npm run watch:all"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^6.3.7",
"browser-sync": "^2.13.0",
"jshint": "^2.9.2",
"node-sass": "^3.8.0",
"npm-run-all": "^2.3.0",
"onchange": "^2.5.0",
"postcss-cli": "^2.5.2",
"uglify-js": "^2.6.4"
}
}
My folder set up is like.
src
app
controllers
directives
filters
services
assets
css
images
js
sass
templates
index.html
package.json
My problem is with watch:js, I can run jshint and uglify separately and they work but if I run watch:js which uses && to run jshint and then uglify then the uglify doesn't work and it stops at jshint.
Try npm run watch:js instead of npm watch:js.
I had the same issue with npm in angular2. The build-script:
"build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
wouldn't work - but both commands were running standalone. The run solved it for me.