With the below package.json file, my CSS and js compile OK and open a browser window proxying the correct site. But saving changes in files isn't causing the browser to refresh.
{
"scripts": {
"watch:css-app": "tailwindcss -i ./src/css/app.css -o ./public_html/assets/css/app.css --postcss --watch",
"watch:js": "./node_modules/.bin/esbuild ./src/js/app.js --bundle --outfile=./public_html/assets/js/app.js --watch",
"watch": "cross-env NODE_ENV=development concurrently 'npm run watch:css-app' 'npm run watch:js'",
"browser-sync": "cross-env NODE_ENV=development browser-sync start --proxy='https://site.local/' --files='./*'",
"watch-sync": "concurrently 'npm run browser-sync' 'npm run watch'"
},
"devDependencies": {
"autoprefixer": "^10.4.13",
"browser-sync": "^2.23.0",
"concurrently": "^6.2.1",
"cross-env": "^6.0.3",
"postcss": "^8.4.20",
"postcss-import": "^15.1.0",
"resolve-url-loader": "^3.1.2",
"tailwindcss": "^3.2.4"
}
}
I've tried a few different things in the --files option:
--files='./path_to_html/**/*.html,./path_to_css/**/*.css'
--files=['./path_to_html/**/*.html','./path_to_css/**/*.css']
omit --files and have --watch instead
But none of those work. Just to be clear, I'm not using Webpack, Gulp etc., I'm just calling npm run watch-sync and package.json is doing the rest.
Anyone know what I'm missing from my config to get this working?
Edit: I've changed things up a bit, but still getting the same result.
Now I've changed my browser-sync script to "browser-sync": "cross-env NODE_ENV=development node bs.js" and bs.js looks like:
const bs = require('browser-sync').create();
bs.emitter.on('init', function () {
console.log('Browsersync is running!');
});
bs.watch('*.html').on('change', bs.reload);
bs.watch('*.css', function (event, file) {
if (event === 'change') {
bs.reload('*.css');
}
});
bs.init({
proxy: 'https://td.local/'
});
As before, when running the script, a new window is launched that loads the site, but changes to files don't cause a reload and also, I'm not getting the message in the console even though the init is telling the script which URL to proxy and it's doing that part. :?
I found the anwser:
bs.init({
injectChanges: false,
files: ['./**/*'],
proxy: 'localhost'
});
Related
I want to minify/uglify a javascript file but after I run the script it never finishes executing. These are the scripts and dependencies I added to it.
"scripts": {
"minify": "uglifyjs -i src/*.js -o build/scripts.min.js",
"uglify": "npm run minify",
},
"devDependencies": {
"uglify-js": "^2.8.29"
}
This is the link to the package.json in my repo. What am I doing wrong? 🤔 Thanks
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?
I have followed the guide to deploy a VueJS app to GitHub pages step by step and it throws an error GET https://jedrekdomanski.github.io/bikeramp-front/ 404 ()
My repo (gh-pages branch): https://github.com/jedrekdomanski/bikeramp-front/tree/gh-pages
Website: https://jedrekdomanski.github.io/bikeramp-front/
script
https://cli.vuejs.org/guide/deployment.html#github-pages
#!/usr/bin/env sh
# abort on errors
set -e
# build
npm run build
# navigate into the build output directory
cd dist
# if you are deploying to a custom domain
# echo 'www.example.com' > CNAME
git init
git add -A
git commit -m 'deploy'
# if you are deploying to https://<USERNAME>.github.io
# git push -f git#github.com:<USERNAME>/<USERNAME>.github.io.git master
# if you are deploying to https://<USERNAME>.github.io/<REPO>
git push -f git#github.com:jedrekdomanski/bikeramp-front.git master:gh-pages
cd -
vue.config.js
module.exports = {
baseUrl: process.env.NODE_ENV === 'production'
? '/bikeramp-front/'
: '/'
}
I am serving the app from gh-pages, like they said.
Source
Your GitHub Pages site is currently being built from the gh-pages branch.
What am I doing wrong?
package.json
{
...
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"axios": "^0.18.0",
"chart.js": "^2.7.3",
"vue": "^2.4.4",
"vue-chartjs": "^3.4.0",
"vue-router": "^3.0.1",
"vuex": "^3.0.0"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-2": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.11",
"file-loader": "^1.1.4",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
}
Maybe try to set baseUrl to full path instead of relative path, since there is limitations for relative path
Refer: https://cli.vuejs.org/config/#publicpath
Update:
Interesting that I notice after switching to full path, it works, then when switch back to relative path, it seems still working.
Here is how I deployed my Vuejs App to a github page:
I add a new file in the root project (next to package.json, ...): vue.config.js
I write inside:
module.exports = {
publicPath: "/something/",
outputDir: "docs",
};
Such that your url will be:
name.github.io/something/
the "docs" gives the output Folder for the npm run build because Github allows you just to choose between /(root) and /docs for the GitHub Page. So in this case on GitHub in the Settings of your project, go to Pages and for Source select /docs.
After that you have just to write following git order:
yourProject(main)$ npm run build
git add .
git status (to be sure)
git commit -am "your commentar"
git branch -M main (only if yourProject(master)is written instead of sfes(main) => GitHub changed master to main)
git push -u origin main
When i run nodemon, it shows
[nodemon] 1.17.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node app.js`
But when i run npm start, everything works fine. Why is nodemon not working
my package.json
{
"name": "sarthakmedia",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"body-parser": "^1.18.3",
"cookie-parser": "~1.4.3",
"cors": "^2.8.4",
"debug": "~2.6.9",
"express": "~4.16.0",
"express-mysql-session": "^1.3.0",
"express-session": "^1.15.6",
"git": "^0.1.5",
"http-errors": "~1.6.2",
"jade": "~1.11.0",
"morgan": "~1.9.0",
"mysql": "*",
"nodemon": "^1.17.4",
"pug": "2.0.0-beta11"
},
"description": "practise",
"main": "app.js",
"devDependencies": {},
"author": "Anita",
"license": "ISC"
}
The api's don't get called at all. nodemon starts fine though
try this
first step
in package.json file
"scripts":{
"start":"node app",
"dev":"nodemon app"
}
second step
install nodemon as devdependencies
using code npm i -D nodemon
3)in app.js file
const express = require("express");
const app = express();
// routes
app.get("/",(req,res)=>{
res.send("hello");
});
// server started
const port =process.env.PORT || 5000;
app.listen(port,()=>{
console.log("server started at port 5000");
});
4)fourth step
use (npm run dev) in command line tool
Nodemon starts by running the file ./app.js.
But your start npm script (which works according to your question) runs a different file ./bin/www/index.js.
I think you should tell nodemon what file is your entry point.
Thus, you should edit the "main" entry in your package.json with the same value, e.g., ./bin/www. In fact, nodemon reads this value in your package.json in order to know what file to start with.
Just run your app with nodemon -w ./ when you are in app root directory.
-w stands for looking at the directory rather than 1 JS file. It is usefu; when you have more than 1 js you need to mon
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!