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
Related
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'
});
For instance, I want to run jest tests for one of my packages.
I set up the test script in the child package.json:
"test" : "jest"
However when I got to the package directory and run:
npm test
I get:
sh: jest: command not found
This makes sense because I've only installed jest in the root package since it is a dev dependency.
What do I need to do to make the npm package jest available in the child packages?
We're using an npm package called env-cmd https://www.npmjs.com/package/env-cmd to run scripts from root level in packages.
our root package.json looks something like this:
{
"name": "#myAwesomeApp/root",
"private": true,
"devDependencies": {
"env-cmd": "^10.1.0",
"lerna": "^5.0.0"
},
"dependencies": {
[...]
},
"workspaces": [
"packages/*"
],
"scripts": {
"internal:warning": "echo \"\n\t\\\\033[32m! ANY NOTIFICATION !\n\"",
"jest": "npm run internal:warning && env-cmd --silent lerna run test"
}
}
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
I am using npm precommit hook, but it is not stopping a file with issues to be committed, nor am I getting the message "Pre commit checks" when I try to commit a file.
Package Json:
{
"name": "myfolder",
"version": "1.0.0",
"description": "",
"main": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 0",
"precommit-msg": "echo 'Pre-commit checks...' && exit 0",
"lint": "csslint global/css"
},
"author": "SR",
"license": "ISC",
"dependencies": {
"csslint": "^1.0.4",
"jshint": "^2.9.4",
"pre-commit": "^1.2.2"
},
"pre-commit": [
"precommit-msg",
"lint"
],
"devDependencies": {
"pre-commit": "^1.2.2"
}
}
Please, make sure that your 'package.json' file is in the same folder, where '.git' folder is (where git repository was initialized). When you install 'pre-commit' package, 'pre-commit' file should appear under '.git/hooks/'.
Just FYI I had this issue because the pre-commit file was missing in the hooks folder.
Running npm i pre-commit --save-dev again created the file and solved it for me.
Have't managed to implement it with few "pre-commit" NPM modules (#fastify/pre-commit, monorepo-staged-precommit) so implemented it "manually" with adding tools/pre-commit.sh file into repo with content like:
#!/bin/sh
DIR='web'
echo "Pre-commit actions (NPM tests for $DIR)..."
cd $DIR && npm run test
and updating package.json with:
"scripts": {
"test",
"install-precommit": "cp ../tools/pre-commit.sh ../.git/hooks/pre-commit"
This solution has some limitations (like instead of automatic installation need to ask somewhere in "README" about npm run install-precommit and I'm not sure how it would work on Windows especially without Git Bash) but it worked for me.
Notes:
Other pre-commit NPM packages either didn't work as well or asked for NVM and other extra tools which I don't want devs to install for such small task.
pre-commit.sh may has any name and don't be executable - "install-precommit" task and git care about.
As shown in the screen shot below I am not able to run gulp to concat the JavaScript files. Its saying that gulp is not defined.
I have tried the following commands:
npm install -g gulp
npm install gulp
npm install gulp --save-dev
I have also set the environment variables as following:
C:\Users\<user>\AppData\Roaming\npm;C:\Python27;C:\Users\<user>\AppData\Roaming\npm\node_modules;C:\Users\<user>\AppData\Roaming\npm\node_modules\gulp;
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
//script paths
var jsFiles = 'scripts/*.js',
jsDest = 'dist/scripts';
gulp.task('scripts', function() {
return gulp.src(jsFiles)
.pipe(concat('scripts.js'))
.pipe(gulp.dest(jsDest));
});
you just need to install and require gulp locally, you probably only installed it globally
At the command line
cd <project-root> && npm install --save-dev gulp
In your gulpfile.js
var gulp = require('gulp');
this is a different dependency than the command line dependency (that you installed globally). More specifically, it is the same NPM package, but the command line program will execute code usually from a different entry point in the NPM package then what require('X') will return.
If we go to the package.json file in the Gulp project on Github, it will tell the whole story:
{
"name": "gulp",
"description": "The streaming build system",
"version": "3.9.1",
"homepage": "http://gulpjs.com",
"repository": "gulpjs/gulp",
"author": "Fractal <contact#wearefractal.com> (http://wearefractal.com/)",
"tags": [ ],
"files": [
// ...
],
"bin": {
"gulp": "./bin/gulp.js"
},
"man": "gulp.1",
"dependencies": {
// ...
},
"devDependencies": {
// ...
},
"scripts": {
"prepublish": "marked-man --name gulp docs/CLI.md > gulp.1",
"lint": "eslint . && jscs *.js bin/ lib/ test/",
"pretest": "npm run lint",
},
"engines": {
"node": ">= 0.9"
},
"license": "MIT"
}
so at the command line:
$ gulp default
will execute this:
"bin": {
"gulp": "./bin/gulp.js"
},
on the other hand, require('gulp') in your code will return the value of this:
https://github.com/gulpjs/gulp/blob/master/index.js
normally we see this in a package.json file as:
"main": "index.js"
but since this is the default, they just omitted it (which is dumb IMO, better to be explicit, but they aren't the first project I have seen take the lame shorthand route.).
Its occurs on Windows and usually one of the following fixes it:
If you didn't, run npm install gulp on the project folder, even if
you have gulp installed globally.
Normally, It isn't a problem on Windows, but it could be a issue with
the PATH. The package will try to get the PATH from the environment,
but you can override it by adding exec_args to your gulp settings.
For example, on Ubuntu:
"exec_args": {
"path": "/bin:/usr/bin:/usr/local/bin"
}
Hope It will be OK.
Source: https://github.com/NicoSantangelo/sublime-gulp/issues/12