This document discusses using NPM scripts as a build tool. It covers setting up scripts in the package.json file to automate common tasks like linting, testing, building assets, and running dev servers. Examples are provided of setting up scripts for CSS preprocessing, bundling JavaScript, running tests, and more for both AngularJS and React projects. Chaining, piping, and running tasks concurrently with NPM scripts is also covered.

1. Introduction to
Using NPM scripts
as a Build Tool.
/@kjy2143 SK planet
1 . 1

2. 1 . 2

3. 1 . 3

4. 1 . 4

5. Front End Developer
in Past
2 . 1

6. 2 . 2

7. Front End Developer
in 2016
3 . 1

8. 3 . 2

9. 2016/2017 MUST-KNOW
WEB DEVELOPMENT TECH
CSS Preprocessor Compile
ES2016+ Compile
Optimization
Linting
Unit Testing
Module Bundling
Package Management
3 . 3

10. skpui:js
3 . 4

11. skpui:css
3 . 5

12. skpui:test
3 . 6

13. JavaScript Uglify
npm install uglify-js -g
uglifyjs foo.js -o foo.min.js
3 . 7

14. JavaScript Linting
npm install jshint -g
npm install jshint-stylish --save-dev
jshint --reporter=node_modules/jshint-stylish foo.js
3 . 8

15. Command Line Interface
CSS Preprocessor Compile
ES2016+ Compile
Optimization
Linting
Unit Testing
Module Bundling
Package Management
3 . 9

16. Automation
4 . 1

17. GRUNT
The JavaScript Task Runner
4 . 2

18. Gruntfile.js
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
// Default task(s).
grunt.registerTask('default', ['uglify']);
};
4 . 3

19. grunt
4 . 4

20. Automate and enhance your workflow
4 . 5

21. gulpfile.babel.js
import gulp from 'gulp';
import sass from 'gulp-sass';
import autoprefixer from 'gulp-autoprefixer';
import sourcemaps from 'gulp-sourcemaps';
import concat from 'gulp-concat';
import uglify from 'gulp-uglify';
gulp.task('styles', () => {
return gulp.src('src/sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(autoprefixer())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dist/css'));
});
gulp.task('combine-js', () => {
return gulp.src('src/js/**/*.js')
.pipe(concat('script.js'))
.pipe(uglify())
.pipe(gulp.dest(dist + 'dist/js'));
});
gulp.task('default', ['styles', 'combine-js']);
4 . 6

22. Problem
5 . 1

23. 5 . 2

24. gulp-handlebars
Latest commit on 14 Mar 2015
handlebars 3.0.0
5 . 3

25. handlebars
Latest commit on 10 Sep 2016
handlebars 4.0.5
5 . 4

26. 5,900
Module Counts
2,600 333,000
< <
5 . 5

27. 1. Is the base tool broken?
2. Is the Grunt/Gulp plugin broken?
3. Is the my configuration broken?
4. Am I using incompatible version?
Frustrating Debugging
5 . 6

28. Use npm module directly.
Without Grunt/Gulp.
Without Grunt/Gulp plugin.
Use npm scripts.
Solution
5 . 7

29. What is the npm scripts?
6 . 1

30. You already use
npm scripts
6 . 2

31. npm init
npm install
npm test
6 . 3

32. npm supports the
"scripts"
property of the
package.json scripts
6 . 4

33. {
"scripts": {
"test": "karma start",
"postinstall": "bower install"
}
}
npm test
npm install
package.json
usage
6 . 5

34. npm-scripts
publish, install, uninstall, version, test, stop, start
npm run-script
pre and post with matching will be run
(e.g. premyscript, myscript, postmyscript)
6 . 6

35. "scripts": {
"start": "npm run dev-server",
"dev-server": "webpack-dev-server"
}
npm dev-server
npm start
package.json
usage
npm start
6 . 7

36. {
"scripts": {
"test": "karma start",
"pretest": "npm run lint",
"posttest": "npm run build",
"postinstall": "bower install"
}
}
npm test
npm install
package.json
usage
Pre & Post scripts
6 . 8

37. {
"scripts": {
"lint": "eslint src/js",
"uglify": "uglifyjs src/js/*.js -m -o dist/js/app.js",
"build:js": "npm run lint && npm run uglify"
}
}
npm run lint
npm run uglify
npm run build:js
package.json
usage
npm run
6 . 9

38. npm run
shell's pre-existing PATH, npm run adds
node_modules/.bin to the PATH provided
to scripts.
{
"scripts": {
"test": "node_modules/.bin/karma start"
}
}
{
"scripts": {
"test": "karma start"
}
}
X O
6 . 10

39. Why npm scripts?
7 . 1

40. Cross-platform
Chaining tasks
Piping tasks
Concurrently tasks
Pre and Post Scripts
Sub-tasks
npm scripts can:
7 . 2

41. 7 . 3

42. 7 . 4

43. var gulp = require('gulp'),
webserver = require('gulp-webserver'),
del = require('del'),
sass = require('gulp-sass'),
karma = require('gulp-karma'),
jshint = require('gulp-jshint'),
sourcemaps = require('gulp-sourcemaps'),
spritesmith = require('gulp.spritesmith'),
browserify = require('browserify'),
source = require('vinyl-source-stream'),
buffer = require('vinyl-buffer'),
uglify = require('gulp-uglify'),
gutil = require('gulp-util'),
ngAnnotate = require('browserify-ngannotate');
var CacheBuster = require('gulp-cachebust');
var cachebust = new CacheBuster();
/////////////////////////////////////////////////////////////////////////////////////
//
// cleans the build output
//
/////////////////////////////////////////////////////////////////////////////////////
gulp.task('clean', function (cb) {
del([
'dist'
], cb);
});
/////////////////////////////////////////////////////////////////////////////////////
//
angularjs with gulp
7 . 5

44. angularjs with gulp
integration with bower
Sass (with source maps)
unit testing / integration testing with Karma, Jasmine and PhantomJs
cache busting - to prevent cache problems in all environments, dev
tools opened or closed, etc.
template cache pre-population - to prevent that each template causes
one extra HTTP request
jshint - the de-facto Javascript code quality checker
concatenation
browserify integration - for using the CommonJs require('module')
synchronous import syntax and avoid maintaining config files with
dependencies
Javascript source maps
Angular-friendly Javascript minification
sprite generation
a development web server with live reload, that re-loads the initial
page of the project
7 . 6

45. {
"scripts": {
"clean": "rimraf dist/ && mkdirp dist/{js,css,html} && copyfiles favicon.ico dist",
"autoprefixer": "postcss -u autoprefixer -r dist/css/*.css",
"scss": "node-sass --output-style expanded --source-map=true -o dist/css src/scss",
"prebuild": "npm run clean && npm test",
"build:js": "browserify src/js/app.jsx --standalone app --transform babelify --debug -p [minify
"build:css": "npm run scss && postcss -u autoprefixer -r < dist/css/app.css | postcss -u cssnan
"build:html": "jade src/jade/index.jade --pretty --out dist/html/",
"build": "npm-run-all --sequential build:*",
"predev": "npm run clean",
"dev:js": "browserify src/js/app.jsx --standalone app --transform babelify --debug | hashmark -
"postdev:js": "jade src/jade/index.jade --pretty --obj dist/assets.json --out dist/html/",
"dev:css": "npm run scss && npm run autoprefixer && hashmark -s -l 8 -m dist/assets.json dist/c
"postdev:css": "jade src/jade/index.jade --pretty --obj dist/assets.json --out dist/html/",
"dev": "npm run dev:js && npm run dev:css",
"open": "opener http://localhost:9090/html/#/",
"live-reload": "live-reload --port 9091 dist/html/",
"serve": "http-server -p 9090 dist/",
"watch:css": "onchange "src/scss" -- npm run dev:css",
"watch:js": "onchange "src/js" -- npm run dev:js",
"watch": "npm-run-all --parallel watch:*",
"start": "npm run live-reload & npm run open && npm run serve & npm run watch",
"pretest": "eslint src/js test --ext=jsx --ext=js",
"test:debug": "karma start karma-debug.conf.js",
"test": "karma start"
react with npm scripts
7 . 7

46. react with npm scripts
Sass (with source maps)
unit testing / integration testing with Karma, Jasmine and PhantomJs
cache busting - to prevent cache problems in all environments, dev
tools opened or closed, etc.
jade template
eslint - Pluggable JavaScript linter
concatenation
browserify integration - for using the CommonJs require('module')
synchronous import syntax and avoid maintaining config files with
dependencies
Javascript source maps
React-friendly Javascript minification
JSX compile
a development web server with live reload, that re-loads the initial
page of the project
7 . 8

47. var gulp = require('gulp'),
webserver = require('gulp-webserver'),
del = require('del'),
sass = require('gulp-sass'),
karma = require('gulp-karma'),
jshint = require('gulp-jshint'),
sourcemaps = require('gulp-sourcemaps'),
spritesmith = require('gulp.spritesmith'),
browserify = require('browserify'),
source = require('vinyl-source-stream'),
buffer = require('vinyl-buffer'),
uglify = require('gulp-uglify'),
gutil = require('gulp-util'),
ngAnnotate = require('browserify-ngannotate');
var CacheBuster = require('gulp-cachebust');
var cachebust = new CacheBuster();
gulp.task('clean', function (cb) {
del([
'dist'
], cb);
});
gulp.task('bower', function() {
var install = require("gulp-install");
return gulp.src(['./bower.json'])
.pipe(install());
});
gulp.task('build-css', ['clean'], function() {
return gulp.src('./styles/*')
.pipe(sourcemaps.init())
{
"scripts": {
"clean": "rimraf dist/ && mkdirp dist/{js,css,
"autoprefixer": "postcss -u autoprefixer -r di
"scss": "node-sass --output-style expanded --s
"prebuild": "npm run clean && npm test",
"build:js": "browserify src/js/app.jsx --stand
"build:css": "npm run scss && postcss -u autop
"build:html": "jade src/jade/index.jade --pret
"build": "npm-run-all --sequential build:*",
"predev": "npm run clean",
"dev:js": "browserify src/js/app.jsx --standal
"postdev:js": "jade src/jade/index.jade --pret
"dev:css": "npm run scss && npm run autoprefix
"postdev:css": "jade src/jade/index.jade --pre
"dev": "npm run dev:js && npm run dev:css",
"open": "opener http://localhost:9090/html/#/"
"live-reload": "live-reload --port 9091 dist/h
"serve": "http-server -p 9090 dist/",
"watch:css": "onchange "src/scss" -- npm run
"watch:js": "onchange "src/js" -- npm run de
"watch": "npm-run-all --parallel watch:*",
"start": "npm run live-reload & npm run open &
"pretest": "eslint src/js test --ext=jsx --ext
"test:debug": "karma start karma-debug.conf.js
"test": "karma start"
}
}
7 . 9

48. bash / node
cat / catw
mkdir / mkdirp
rm / rimraf
& / npm-run-all --parallel
Cross-platform
7 . 10

49. Chaning tasks(&&)
Running command is to run a command only
if the previous command is successful.
"scripts": {
...
"clean": "rimraf dist/ && mkdirp dist/{js,css,html} && copyfiles favicon.ico dist",
...
}
7 . 11

50. Concurrently tasks(&)
Sometimes it is also nice to be able to run
multiple commands at the concurrently.
"scripts": {
...
"watch": "npm run watch-js & npm run watch-less & npm run watch-jade",
...
},
7 . 12

51. Piping tasks(|)
piping (|) the output from browserify into uglifyjs.
"scripts": {
"build-js": "browserify -t reactify app/js/main.js | uglifyjs -mc > static/bundle.js"
}
7 . 13

52. {
"scripts": {
"test": "karma start",
"pretest": "npm run lint",
"posttest": "npm run build",
"postinstall": "bower install"
}
}
npm test
npm install
package.json
usage
Pre & Post scripts
7 . 14

53. "scripts": {
"lint": "eslint src/**/*.js",
"unit": "karma start",
"test": "npm run lint & npm run unit"
}
npm run lint
npm run unit
npm run test
package.json
usage
Sub-tasks
7 . 15

54. "scripts": {
"lint": "eslint src/**/*.js",
"unit": "karma start",
"test": "npm-run-all --sequential lint unit"
}
npm run test
package.json
usage
Sub-tasks
with npm-run-all
7 . 16

55. "scripts": {
"test:lint": "eslint src/**/*.js",
"test:unit": "karma start",
"test": "npm-run-all test:*"
}
npm run test
package.json
usage
Sub-tasks
with namespace
7 . 17

56. npm-build-boilerplate
"scripts": {
"clean": "rm -f dist/{css/*,js/*,images/*}",
"autoprefixer": "postcss -u autoprefixer -r dist/css/*",
"scss": "node-sass --output-style compressed -o dist/css src/scss",
"lint": "eslint src/js",
"uglify": "mkdir -p dist/js && uglifyjs src/js/*.js -m -o dist/js/app.js &&
"imagemin": "imagemin src/images/* -o dist/images",
"icons": "svgo -f src/images/icons && mkdir -p dist/images && svg-sprite-gen
"serve": "browser-sync start --server --files "dist/css/*.css, dist/js/*.js
"build:css": "npm run scss && npm run autoprefixer",
"build:js": "npm run lint && npm run uglify",
"build:images": "npm run imagemin && npm run icons",
"build:all": "npm run build:css && npm run build:js && npm run build:images"
"watch:css": "onchange "src/scss" -- npm run build:css",
"watch:js": "onchange "src/js" -- npm run build:js",
"watch:images": "onchange "src/images" -- npm run build:images",
"watch:all": "npm-run-all -p serve watch:css watch:js watch:images",
"postinstall": "npm run build:all && npm run watch:all"
}
7 . 18

57. npm-react-todomvc
"scripts": {
"clean": "rimraf dist/ && mkdirp dist/{js,css,html} && copyfiles favicon.ico
"autoprefixer": "postcss -u autoprefixer -r dist/css/*.css",
"scss": "node-sass --output-style expanded --source-map=true -o dist/css src
"prebuild": "npm run clean && npm test",
"build:js": "browserify src/js/app.jsx --standalone app --transform babelify
"build:css": "npm run scss && postcss -u autoprefixer -r < dist/css/app.css
"build:html": "jade src/jade/index.jade --pretty --out dist/html/",
"build": "npm-run-all --sequential build:*",
"predev": "npm run clean",
"dev:js": "browserify src/js/app.jsx --standalone app --transform babelify -
"postdev:js": "jade src/jade/index.jade --pretty --obj dist/assets.json --ou
"dev:css": "npm run scss && npm run autoprefixer && hashmark -s -l 8 -m dist
"postdev:css": "jade src/jade/index.jade --pretty --obj dist/assets.json --o
"dev": "npm run dev:js && npm run dev:css",
"open": "opener http://localhost:9090/html/#/",
"live-reload": "live-reload --port 9091 dist/html/",
"serve": "http-server -p 9090 dist/",
"watch:css": "onchange "src/scss" -- npm run dev:css", 7 . 19

58. 7 . 20

59. npm script
+
webpack
=
Best Build Tool
7 . 21

60. THANK YOU??
7 . 22

61. 8 . 1

62. 8 . 2

63. yarn vs npm install
8 . 3

64. 8 . 4

65. Prototype vs. jQuery
Backbone vs. Knockout
Angular vs. React
Grunt vs. Gulp
NPM vs. Yarn
8 . 5

66. 8 . 6

67. npm script
+
webpack
=
Best Build Tool
8 . 7

68. Less code,
less extensible
8 . 8

69. Useful Link
Why I Left Gulp and Grunt for npm Scripts
Why npm Scripts?
How to Use npm as a Build Tool
Advanced front-end automation
with npm scripts
8 . 9

70. Sample
npm-react-todomvc
8 . 10

71. THANK YOU!
8 . 11