Many people have done this on Mac, but I noticed fewer people around me setting up npm-scripts development environments on Windows. Here are the steps for doing so.
1. Installing Node.js
Install Node.js on your Windows 10 environment. You can find installation instructions on the page below:
Once prepared, (please refer to the reference page; from here on, execute commands by launching Windows PowerShell), run the PowerShell command in the development directory:
npm init
After running the command, input the following:
package name:
version:
description:
git repository:
keywords:
license:
Finally, type “yes” when prompted with:
Is this OK? (yes):
This will create “package.json” and “package-lock.json.”
Custom Template Directory Structure for npm-scripts on Windows 10 Environment
The directory structure will look like this:
npm-scripts-win10
│ package-lock.json
│ package.json
│ postcss.config.js
│ rollup.config.js
├─dist
│ │ index.html
│ └─assets
│ ├─css
│ │ style.css
│ │ style.css.map
│ │ style.min.css
│ │ style.min.css.map
│ ├─images
│ │ 1.jpg
│ └─js
│ index.js
│ index.min.js
└─src
├─assets
│ ├─images
│ │ 1.jpg
│ ├─js
│ │ index.js
│ └─sass
│ style.scss
└─pages
index.html
2. Output CSS File
2-1. Install Sass
Here we’ll install node-sass.
Run the following PowerShell command:
npm install node-sass --save-dev
This will complete the installation.
In package.json, add to scripts:
"css/sass": "node-sass src/assets/sass/style.scss -o dist/assets/css --output-style expanded --source-map dist/assets/css",
Create the file src/assets/sass/style.scss and then run the PowerShell command:
npm run css/sass
The files dist/assets/css/style.css and dist/assets/css/style.css.map will be output.
2-2. Add Vendor Prefix and Compress CSS
Install postcss-cli, cssnano, autoprefixer, and postcss.
Run the PowerShell command:
npm install postcss-cli postcss cssnano autoprefixer --save-dev
In package.json, add to scripts:
"css/postcss": "postcss dist/assets/css/style.css -o dist/assets/css/style.min.css",
The above scripts requires a postcss.config.js file in the root directory:
module.exports = {
plugins: [
require('autoprefixer')({
browsers: ['last 2 versions'],
cascade: false
}),
require('cssnano')({
preset: 'default',
})
]
}
Run the following PowerShell command:
npm run css/postcss
This compresses style.css and outputs dist/assets/css/style.min.css and dist/assets/css/style.min.css.map.
2-3. Delete and Create CSS Output Directory
Create the CSS output directory.
In package.json, add to scripts:
"clean/css": "rimraf dist/assets/css && cd dist/assets && mkdir css && cd ../../",
This script deletes the CSS directory, moves to dist/assets, creates a new CSS directory, and returns to the root.
Run the following PowerShell command:
npm run clean/css
The CSS directory will be deleted and recreated.
2-4. Execute All CSS (Sass) Processes Together
Now that we’ve completed 2-1 (outputting CSS file), 2-2 (adding vendor prefix and compressing), and 2-3 (deleting and creating CSS directory), if you want to run them together, the flow should be:
2-3 → 2-1 → 2-2.
To execute all processes together, install npm-run-all.
Run the following PowerShell command:
npm install npm-run-all --save-dev
In package.json, add to scripts:
"css": "npm run clean/css && npm-run-all -s css/*",
Here, the parameter -p represents parallel processing, while -s represents sequential processing. After clean/css, all css/* related processes will execute sequentially.
3. Output JavaScript File
3-1. Install Rollup Plugins
Run the PowerShell command:
npm install rollup --save-dev
Next, install Rollup plugins rollup-plugin-node-resolve, rollup-plugin-commonjs, and rollup-plugin-babel:
npm install rollup-plugin-node-resolve rollup-plugin-commonjs rollup-plugin-babel --save-dev
Install @babel/core and @babel/preset-env as well:
npm install @babel/core @babel/preset-env --save-dev
In the root directory, create rollup.config.js:
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
export default {
output: {
format: 'iife',
dir: 'dist/assets/js'
},
plugins: [
resolve({ jsnext: true }),
commonjs(),
babel({
presets: [
[
"@babel/preset-env", {
"modules": false,
"targets": {
"browsers": ['last 2 versions']
}
}
]
],
babelrc: false
})
],
experimentalCodeSplitting: true
};
Add the following script in package.json:
"js/rollup": "rollup src/assets/js/index.js -c=rollup.config.js",
3-2. Compress JavaScript File, Install uglify-js
Run the following PowerShell command:
npm install uglify-js --save-dev
Add the following script in package.json:
"js/uglifyjs": "uglifyjs dist/assets/js/index.js -o dist/assets/js/index.min.js",
3-3. Delete and Create JS Output Directory
Create the JavaScript output directory.
In package.json, add to scripts:
"clean/js": "rimraf dist/assets/js && cd dist/assets && mkdir js && cd ../../",
This script deletes the JS directory, moves to dist/assets, creates a new JS directory, and returns to the root.
Run the following PowerShell command:
npm run clean/js
The JS directory will be deleted and recreated.
4. Copying Image Files to Output Directory
4-1. Install cpx
Run the following PowerShell command to install cpx:
npm install cpx --save-dev
In package.json, add to scripts:
"images/copy": "cpx src/assets/images/** dist/assets/images/",
Run the following PowerShell command:
npm run images/copy
This copies files from the src/assets/images/ directory to the dist/assets/images/ directory.
4-2. Delete and Create Image Output Directory
Create the output directory for image files.
In package.json, add to scripts:
"clean/images": "rimraf dist/assets/images && cd dist/assets && mkdir images && cd ../../",
This script deletes the images directory, moves to dist/assets, creates a new images directory, and returns to the root.
Run the following PowerShell command:
npm run clean/images
This deletes and recreates the images directory.
4-3. Execute All Image-Related Processes Together
Create the images directory and copy image files.
In package.json, add to scripts:
"images": "npm run clean/images && npm-run-all -s images/*",
After running clean/images, all related images/* tasks will execute sequentially.
5. Copy HTML Files to Output Directory
In package.json, add to scripts:
"html/plain": "cpx src/pages/**/*.html dist/",
Run the following PowerShell command:
npm run html/plain
This copies HTML files from the src/pages/ directory to the dist/ directory.
Execute All HTML Copy Processes Together
In package.json, add to scripts:
"html": "npm-run-all html/*",
All html/* related tasks will execute sequentially.
6. File Watching
Monitor updates to HTML, SCSS, JS, and image files.
6-1. Start Browsing Server with browser-sync
Run the following PowerShell command to install browser-sync:
npm install browser-sync --save-dev
In package.json, add to scripts:
"watch/server": "browser-sync start -s dist -f \"src, **/*.html, !node_modules/**/*\"",
Run the following PowerShell command:
npm run watch/server
This launches the dist/ directory’s index.html file in the browser, allowing you to view files within the dist/ directory.
6-2. Watch HTML, SCSS, and JS Files with Watch
Run the following PowerShell command to install watch:
npm install watch --save-dev
In package.json, add to scripts:
"watch/css": "watch \"npm run css\" ./src/assets/sass",
"watch/js": "watch \"npm run js\" ./src/assets/js",
"watch/html": "watch \"npm run html\" ./src/pages",
Updates in src/ directory will trigger execution of npm run css, npm run js, and npm run html.
6-3. Watch Image Directory with Onchange
Run the following PowerShell command to install onchange:
npm install onchange --save-dev
In package.json, add to scripts:
"watch/images": "onchange \"src/assets/images\" -e \"**/*.DS_Store\" -- npm run images",
If any updates occur within the images/ directory, npm run images will execute.
6-4. Combine All Watch Tasks
In package.json, add to scripts:
"watch": "npm-run-all -p watch/*"
Run the following PowerShell command:
npm run watch
This starts the browsing server and monitors changes for all HTML, SCSS, JS, and image files.
7. Summary of Custom npm-scripts Template for Windows 10 Environment
The template is available here:
In package.json, devDependencies lists the modules installed in steps 1 to 6. By running the following PowerShell command:
npm install
All modules from steps 1 to 6 will be installed in the node_modules directory.
Please note: If you reuse this template, do so at your own responsibility.
