├── .gitignore ├── LICENSE ├── README.md ├── assets ├── css │ └── test.css ├── img │ └── image.jpg ├── js │ ├── test1.js │ └── test2.js └── scss │ └── style.scss ├── package-lock.json └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /dist -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Gilbert Pellegrom 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # NPM Scripts 2 | 3 | This repo contains the demo code and files that was used to test NPM scripts for the article [Using Npm Scripts as a Build Tool](https://deliciousbrains.com/npm-build-script/) on [deliciousbrains.com](https://deliciousbrains.com). 4 | 5 | To get up and running install the required packages: 6 | 7 | ``` 8 | npm install 9 | ``` 10 | 11 | Then run `npm run build` 12 | -------------------------------------------------------------------------------- /assets/css/test.css: -------------------------------------------------------------------------------- 1 | #test { 2 | color: #fff; 3 | } -------------------------------------------------------------------------------- /assets/img/image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deliciousbrains/npm-scripts/98e53d196128bb05438c16e397b1aa4ca8774a15/assets/img/image.jpg -------------------------------------------------------------------------------- /assets/js/test1.js: -------------------------------------------------------------------------------- 1 | console.log('test 1'); -------------------------------------------------------------------------------- /assets/js/test2.js: -------------------------------------------------------------------------------- 1 | console.log('test 2'); -------------------------------------------------------------------------------- /assets/scss/style.scss: -------------------------------------------------------------------------------- 1 | #example { 2 | padding: 10%; 3 | 4 | .info { 5 | margin: 20px; 6 | } 7 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "npm-scripts", 3 | "version": "1.1.0", 4 | "private": true, 5 | "scripts": { 6 | "scss": "sass assets/scss/style.scss dist/css/style.css", 7 | "concat:css": "concat -o dist/css/styles.css dist/css/style.css assets/css/test.css", 8 | "concat:js": "mkdir -p dist/js && concat -o dist/js/scripts.js assets/js/test1.js assets/js/test2.js", 9 | "concat": "npm run concat:css && npm run concat:js", 10 | "cssmin": "cleancss -o dist/css/styles.min.css dist/css/styles.css", 11 | "uglify": "uglifyjs -o dist/js/scripts.min.js dist/js/scripts.js", 12 | "squoosh": "squoosh-cli --mozjpeg '{quality:70}' assets/img -d dist/img", 13 | "build:css": "npm run scss && npm run concat:css && npm run cssmin", 14 | "build:js": "npm run concat:js && npm run uglify", 15 | "build:img": "npm run squoosh", 16 | "build": "npm run build:css && npm run build:js && npm run build:img", 17 | "watch:css": "onchange 'assets/scss/*.scss' -- npm run build:css", 18 | "watch:js": "onchange 'assets/js/*.js' -- npm run build:js", 19 | "watch": "npm-run-all --parallel watch:*" 20 | }, 21 | "devDependencies": { 22 | "@squoosh/cli": "^0.7.2", 23 | "clean-css-cli": "^5.5.0", 24 | "concat": "^1.0.3", 25 | "npm": "^8.3.0", 26 | "npm-run-all": "^4.1.5", 27 | "onchange": "^7.1.0", 28 | "sass": "^1.48.0", 29 | "uglify-js": "^3.14.5" 30 | } 31 | } 32 | --------------------------------------------------------------------------------