Hello. Today i wrote a NPM Task Runner. What do you think about it? What is bad in your opinion and what should I change. It is designed for smaller to medium projects.
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "npm-run-all -p run:server watch:*",
"run:server": "browser-sync dist -w",
"refresh:server": "prettier dist/index.html -w",
"pretty:check": "prettier -c src/**/*.{html,scss,js}",
"pretty:code": "prettier -w src/**/*.{html,scss,js}",
"clean:html": "rimraf dist/index.html dist/pages/*",
"copy:html": "copyfiles -u 1 src/index.html src/pages/* dist",
"build:html": "npm-run-all clean:html copy:html refresh:server",
"watch:html": "onchange src/index.html src/pages -- npm run build:html",
"clean:css": "rimraf dist/css/*",
"compile:sass": "node-sass src/sass/main.scss dist/css/style.css",
"prefix:css": "postcss -u autoprefixer -r dist/css/style.css",
"compress:css": "node-sass --output-style compressed dist/css/style.css dist/css/style.css",
"build:css": "npm-run-all clean:css compile:sass prefix:css compress:css refresh:server",
"watch:css": "onchange src/sass -- npm run build:css",
"clean:js": "rimraf dist/js/*",
"lint:code": "eslint ./src/js",
"bundle:js": "terser src/js/*.js -m -b -o dist/js/app.js",
"compile:js": "babel dist/js/app.js -o dist/js/app.js",
"compress:js": "terser dist/js/app.js -c -o dist/js/app.js",
"build:js": "npm-run-all lint:code clean:js bundle:js compile:js compress:js refresh:server",
"watch:js": "onchange src/js -- npm run build:js",
"clean:images": "rimraf dist/images/*",
"compress:images": "imagemin src/images/* -o dist/images",
"compress:icons": "svgo -f src/images/icons -o dist/images/icons",
"build:sprite": "svg-sprite-generate -d dist/images/icons -o dist/images/icons.svg",
"clean:icons": "rimraf dist/images/icons",
"build:images": "npm-run-all clean:images compress:images build:sprite compress:icons clean:icons refresh:server",
"watch:images": "onchange src/images -- npm run build:images"
},
"author": "",
"license": "ISC",
"dependencies": {},
"devDependencies": {
"@babel/cli": "^7.11.6",
"@babel/core": "^7.11.6",
"@babel/preset-env": "^7.11.5",
"autoprefixer": "^10.0.0",
"browser-sync": "^2.26.12",
"copyfiles": "^2.3.0",
"eslint": "^7.9.0",
"imagemin-cli": "^6.0.0",
"mkdirp": "^1.0.4",
"node-sass": "^4.14.1",
"npm-run-all": "^4.1.5",
"onchange": "^7.0.2",
"postcss": "^8.0.9",
"postcss-cli": "^8.0.0",
"prettier": "^2.1.2",
"rimraf": "^3.0.2",
"svg-sprite-generator": "0.0.7",
"svgo": "^1.3.2",
"terser": "^5.3.2"
}
}
The minimal structure of the project must be as follow.
You can freely structure the js and sass folders as long as there is a main.scss file inside the sass folder. There also should be configuration files for prettier, eslint and babel.