Hello I wish compile Vue files with Gulp, so far I've used gulp, webpack and webpack-stream which did the trick, my Vue compiling was set through webpack.config.js and webpack-stream was great for that.
But since I updated package.json and Vue to rely on vue-cli-service and vue.config.js I have to compile with 'npm run ...script andrun "vue-cli-service build".
I've managed to get it working like this:
In gulpfile.js
gulp.task('site-js', siteJS);
function siteJS() {
return gulp.src('src/js/**.js')
.pipe(plumber())
.pipe(webpack(webpackConfig))
.pipe(gulpif(globalVars.productionBuild, uglify()))
.pipe(gulp.dest(destDir));
}
In package.json
"scripts": {
"build-dev": "gulp build-dev",
"build": "gulp build",
"css": "gulp css",
"js": "gulp js",
"vuejs": "./node_modules/.bin/vue-cli-service build ./src/vue/app.js",
"dev": "gulp watch",
},
This works fine when I run 'gulp build' but it does not support 'gulp watch' as when .exac() is run from gulp watch state it crashes.
Is there a way to run vue build from code using vue-cli-service?
Related
I want to try basic project from tanstack/react-table from
https://github.com/TanStack/table/tree/main/examples/react/basic
I am new in NPM. I am on Windows.
I wrote:
git clone https://github.com/TanStack/table.git
then I am going to the subfolder examples\react\basic
then I wrote:
npm install
and in subfolder "node_modules" only folders "react" and "react-dom" appeard.
There is package.json:
{
"name": "tanstack-table-example-basic",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview",
"start": "vite"
},
"dependencies": {
"#tanstack/react-table": "^8.2.6",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"#rollup/plugin-replace": "^4.0.0",
"#vitejs/plugin-react": "^1.1.3",
"vite": "^2.8.6"
}
}
Please, why the "#tanstack/react-table" package is not installed?
When I wrote:
npm start
I received message:
[ERROR] [plugin vite:dep-scan] Failed to resolve entry for package "#tanstack/react-table".
I tried to write:
npm install #tanstack/react-table -g
and folder "#tanstack/react-table" appeard in folder C:\Users...\AppData\Roaming\npm\node_modules. I copied it to project folder and start project and all was OK. But I think, it is not right way.
What am I doing bad, please?
do you want to add react-table to your own project or you just want to clone their project and run the samples ?
for the first one you should go to your project folder and write this in cmd
npm install #tanstack/react-table
for the second one you should clone their project then go to example folder
then write npm install in cmd
Edit 1
remove all the node_modules in any folder of project
run this command in main folder yarn install
run yarn install in folder examples/react/basic
run command npm start in basic folder
before start you should install yarn if you didn't have it
I have downloaded a zip file of a Barba project, unzipped opened it in VS then npm install yarn and then npm run dev.. I get error missing script dev. What am I missing ?
"name": "barba-starter-template",
"version": "1.0.0",
"description": "A simple starter template for setting up a ECMAScript 6 project with barba.js and webpack.",
"main": "app.js",
"scripts": {
"dev": "webpack-dev-server --mode development",
"build": "webpack --mode production",
"start": "node index.js"
},
I would like to use ng build --watch & gulp watch:ng on the same console
Here's my task code
gulp.task('watch:ng', function () {
gulp.watch('ng/dist/ng/*', gulp.series('copy-ng'));
});
I want to copy/merge the scripts to another location when angular rebuild the project
I found a solution using npm-run-all
npm install npm-run-all --save-dev
"scripts": {
"build:watch": "ng build --deleteOutputPath=false --watch",
"gulp:watch": "gulp watch:ng",
"rebuild": "run-p build:watch gulp:watch",
}
npm run rebuild
Vue CLI v3 always creating "dist/report.html" when building for production. It's a webpack bundle analyzer report.
I can't find a way to stop building that file.
How to avoid creating "report.html" when building Vue CLI 3 app for production?
Here is my package.json scripts:
"scripts": {
"dev": "npm run serve",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:e2e": "vue-cli-service test:e2e",
"test:unit": "vue-cli-service test:unit"
},
So far the only way I found to disable it is via vue.config.js:
pluginOptions: {
webpackBundleAnalyzer: {
analyzerMode: "disabled"
}
},
Would be good to know why this thing is always on in Vue CLI 3.
I'd like to share some updates as of Vue CLI 3.8.4:
Vue CLI
webpack-bundle-analyzer is a dependency of #vue/cli-service#^3.9.0
By the default, vue-cli-service build does not generate dist/report.html nor dist/report.json
According to Vue CLI documentation:
--report generates the dist/report.html
--report-json generates the dist/report.json. By the way, this JSON file can quickly become huge
Both argument can be cumulated (both report.html and report.json are generated). When I tested, cumulating both arguments make the build time significantly longer
Webpack bundle analyser
The Vue CLI does not automatically run a web server to preview the report files. If you want to the webpack-bundle-analyzer in the standard way, the webpack configuration has to be updated:
// in {root folder}/vue.config.js
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
.BundleAnalyzerPlugin;
module.exports = {
configureWebpack: {
plugins: [new BundleAnalyzerPlugin()]
}
};
Even without the --report nor --report-json, the report.html will always be generated and the 8888 port should be available as http://localhost:8888 will be prompted
Make sure that your build npm script does not contain the --report parameter.
"scripts": {
"serve": "vue-cli-service serve",
"lint": "vue-cli-service lint",
"build": "vue-cli-service build",
"report": "vue-cli-service build --report",
}
It took me a while to get the debugger to work within Visual Studio Code. Now the program breaks on set breakpoints inside of .vue files/components. But none of the watches seem to work. They are either undefined or unavailable, even when the variables have been created.
The settings I use in launch.json :
{
"name": "chrome debug",
"type": "chrome",
"request": "launch",
"port": 3000,
"url": "http://localhost:3000/admin",
"webRoot": "${workspaceFolder}",
"breakOnLoad": true
// "sourceMapPathOverrides": {
// "webpack:///src/*": "${webRoot}/*"
// }
}
I build my app through npm run build or npm run devbuild which, by my knowlegde, 'compiles' the .vue components into Javascript files. And then start the app with either npm start or nodemon index.js.
Package.json
"scripts": {
<...>
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
"devbuild": "cross-env NODE_ENV=development webpack --progress --hide-modules",
<...>
},
Have you ever tried add a new script with nodemon? Something like this:
"newScript": "nodemon -L -e ts,json --watch . --exec \"npm run build
|| npm run devbuild\""
-L = Though this should be a last resort as it will poll every file it can find.
-e = By default, nodemon looks for files with the .js, .mjs, .coffee, .litcoffee, and .json extensions. If you use the --exec option and monitor app.py nodemon will monitor files with the extension of .py. However, you can specify your own list with the -e (or --ext) switch like so: nodemon -e js,jade
--watch . = To watch all the changes on the path, in this case all the code on the current path.
(I got all of this information from the documentation.
then, run the command:
npm run newScript