Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
npm run-scripts boilerplate
{
"name": "my-app",
"version": "1.0.0",
"description": "My test app",
"main": "src/js/index.js",
"scripts": {
"jshint:dist": "jshint src/js/*.js",
"jshint": "npm run jshint:dist",
"jscs": "jscs src/*.js",
"browserify": "browserify -s Validating -o ./dist/js/build.js ./lib/index.js",
"browsersync": "browser-sync start --server --files 'src/*'",
"uglify:dist": "uglify src/js/**/*.js > dist/js/script.min.js",
"uglify": "npm run uglify:dist",
"test": "mocha",
"clean:dist": "rm -rf dist",
"clean:tmp": "rm -rf tmp",
"clean": "npm run clean:dist && npm run clean:tmp",
"copy:dist": "cp src/*.{js,css,html} dist/",
"copy": "npm run copy:dist",
"sass:dist": "sass src/css/style.scss > dist/css/style.min.css",
"sass": "npm run sass:dist",
"htmlmin:dist": "htmlmin -cs dist/index.html tmp/index.html",
"imagemin": "imagemin src/images/* dist/images/* -p",
"build:html": "npm run htmlmin",
"build:js": "npm run jshint && npm run uglify",
"build:css": "npm run sass",
"build:images": "npm run imagemin",
"build": "npm run clean && npm run build:html && npm run build:js && npm run build:css && npm run build:imagemin",
"watch": "watch 'npm run build' ."
},
"dependencies": {
"jshint": "latest",
"imagemin": "latest",
"browser-sync": "latest",
"uglifyjs": "latest",
"watch": "latest",
"cssmin": "latest",
"jscs": "latest",
"uglify-js": "latest",
"browserify": "latest",
"expect.js": "latest",
"should": "latest",
"mocha": "latest",
"istanbul": "latest"
}
}
@addyosmani

This comment has been minimized.

Show comment Hide comment
@addyosmani

addyosmani Nov 1, 2014

Lazy web request: if anyone would like to write a version of generator-webapp or generator-gulp-webapp that uses npm run for task automation, that would be super fun to see in action. The above is a rough flow for a similar type of project.

Owner

addyosmani commented Nov 1, 2014

Lazy web request: if anyone would like to write a version of generator-webapp or generator-gulp-webapp that uses npm run for task automation, that would be super fun to see in action. The above is a rough flow for a similar type of project.

@Munter

This comment has been minimized.

Show comment Hide comment
@Munter

Munter Nov 1, 2014

Yeoman generator, setting up a full workflow with npm as the task runner: https://github.com/Munter/generator-npm-webapp

Munter commented Nov 1, 2014

Yeoman generator, setting up a full workflow with npm as the task runner: https://github.com/Munter/generator-npm-webapp

@acusti

This comment has been minimized.

Show comment Hide comment
@acusti

acusti Apr 7, 2015

I love the simplicity of using npm scripts for task running; thanks for sharing!

A note: line 7 should be "jshint:dist": "jshint src/js/*.js'", I believe.

acusti commented Apr 7, 2015

I love the simplicity of using npm scripts for task running; thanks for sharing!

A note: line 7 should be "jshint:dist": "jshint src/js/*.js'", I believe.

@ha404

This comment has been minimized.

Show comment Hide comment
@ha404

ha404 Aug 7, 2015

I'd change line 11 to: "browsersync": "browser-sync start --server --files 'src/*'",

ha404 commented Aug 7, 2015

I'd change line 11 to: "browsersync": "browser-sync start --server --files 'src/*'",

@gbabula

This comment has been minimized.

Show comment Hide comment
@gbabula

gbabula Aug 18, 2015

Using this on a new project I'm working on
https://github.com/MajorLeagueBaseball/g5-component/
https://github.com/MajorLeagueBaseball/g5-component/blob/master/package.json#L56

I was getting some NPM errors with jshint, this seemed to do the trick

"lint": "jshint src/scripts/ || true"

Found that solution in this thread
npm/npm#6124

gbabula commented Aug 18, 2015

Using this on a new project I'm working on
https://github.com/MajorLeagueBaseball/g5-component/
https://github.com/MajorLeagueBaseball/g5-component/blob/master/package.json#L56

I was getting some NPM errors with jshint, this seemed to do the trick

"lint": "jshint src/scripts/ || true"

Found that solution in this thread
npm/npm#6124

@tnguyen14

This comment has been minimized.

Show comment Hide comment
@tnguyen14

tnguyen14 Nov 2, 2015

For the copy task, is app/!{...} the correct syntax? Is that referring to the native unix cp command? When I tried, I get this error

:; cp src/!{js} dist/
-bash: !{js}: event not found

For the copy task, is app/!{...} the correct syntax? Is that referring to the native unix cp command? When I tried, I get this error

:; cp src/!{js} dist/
-bash: !{js}: event not found
@mattcdowning

This comment has been minimized.

Show comment Hide comment
@mattcdowning

mattcdowning Nov 3, 2015

"browsersync" should be "browser-sync" in dependencies. Also trailing comma on line 45 throws "Failed to parse json" error.

Thanks for putting this together, Addy!

"browsersync" should be "browser-sync" in dependencies. Also trailing comma on line 45 throws "Failed to parse json" error.

Thanks for putting this together, Addy!

@addyosmani

This comment has been minimized.

Show comment Hide comment
@addyosmani

addyosmani Nov 26, 2015

Thanks @mattcdowning. Should be fixed up now!

Owner

addyosmani commented Nov 26, 2015

Thanks @mattcdowning. Should be fixed up now!

@kvz

This comment has been minimized.

Show comment Hide comment
@kvz

kvz Jan 6, 2016

Thanks for this! On line 7 there's a trailing single quote that should be removed

kvz commented Jan 6, 2016

Thanks for this! On line 7 there's a trailing single quote that should be removed

@yckart

This comment has been minimized.

Show comment Hide comment
@yckart

yckart Jan 20, 2016

@addyosmani I've not tested this, but it seems that there's something broken around the htmlmin:dist-task. htmlmin itself is not listed in dependencies and "build:html": "npm run htmlmin" points to an undefined run-script. Or am I wrong?

yckart commented Jan 20, 2016

@addyosmani I've not tested this, but it seems that there's something broken around the htmlmin:dist-task. htmlmin itself is not listed in dependencies and "build:html": "npm run htmlmin" points to an undefined run-script. Or am I wrong?

@gustavjorlov

This comment has been minimized.

Show comment Hide comment
@gustavjorlov

gustavjorlov Mar 9, 2016

I get the same response as @tnguyen14, although I guess that something like this is used: http://ss64.com/bash/syntax-expand.html. See the explanation near the bottom about Pattern Matching

I get the same response as @tnguyen14, although I guess that something like this is used: http://ss64.com/bash/syntax-expand.html. See the explanation near the bottom about Pattern Matching

@vphantom

This comment has been minimized.

Show comment Hide comment
@vphantom

vphantom Mar 9, 2016

Based on @tnguyen14 and @gustavjorlov above, I would guess that line 18 should become: "copy:dist": "cp src/!(js,css,index.html) dist/", if indeed the intent is to exclude anything with "js", "css" or "index.html" in its name.

vphantom commented Mar 9, 2016

Based on @tnguyen14 and @gustavjorlov above, I would guess that line 18 should become: "copy:dist": "cp src/!(js,css,index.html) dist/", if indeed the intent is to exclude anything with "js", "css" or "index.html" in its name.

@tideman

This comment has been minimized.

Show comment Hide comment
@tideman

tideman May 3, 2016

I am also wondering where the cp in copy:dist": "cp src/!{js,css,index.html} dist/ " is coming from. This is not the native cp on the cli right? I also don't understand where the glob selection is coming from !{} . I can't find a cp npm pakage with the same name. Can you enlight me on that?

tideman commented May 3, 2016

I am also wondering where the cp in copy:dist": "cp src/!{js,css,index.html} dist/ " is coming from. This is not the native cp on the cli right? I also don't understand where the glob selection is coming from !{} . I can't find a cp npm pakage with the same name. Can you enlight me on that?

@LucianU

This comment has been minimized.

Show comment Hide comment
@LucianU

LucianU May 12, 2016

The shell version of the copy command would be cp src/*.{js,css,html} dist/.

LucianU commented May 12, 2016

The shell version of the copy command would be cp src/*.{js,css,html} dist/.

@aeosynth

This comment has been minimized.

Show comment Hide comment
@aeosynth

aeosynth May 24, 2016

Why not use a Makefile? Is it just for better Windows support?

Why not use a Makefile? Is it just for better Windows support?

@Arovane

This comment has been minimized.

Show comment Hide comment
@Arovane

Arovane May 26, 2016

Thanks for that,

Is there a way so when we add new images to src/images/ that they will automatically be minified into dist/images/ ?
Or at least get automatically copied from src/images/ to dist/images/ until the npm restart ?

Right now when all npm scripts are running, images copied to src/images/ are not minified/copied to dist/images/ so a restart is a must and that's time consuming.

Arovane commented May 26, 2016

Thanks for that,

Is there a way so when we add new images to src/images/ that they will automatically be minified into dist/images/ ?
Or at least get automatically copied from src/images/ to dist/images/ until the npm restart ?

Right now when all npm scripts are running, images copied to src/images/ are not minified/copied to dist/images/ so a restart is a must and that's time consuming.

@addyosmani

This comment has been minimized.

Show comment Hide comment
@addyosmani

addyosmani Jul 20, 2016

Things I'll try updating when I get the chance:

  • Switch to ESLint
  • Babel for sure
  • Maybe drop BrowserSync
Owner

addyosmani commented Jul 20, 2016

Things I'll try updating when I get the chance:

  • Switch to ESLint
  • Babel for sure
  • Maybe drop BrowserSync
@ntwb

This comment has been minimized.

Show comment Hide comment
@ntwb

ntwb Jul 22, 2016

Add stylelint for CSS linting

ntwb commented Jul 22, 2016

Add stylelint for CSS linting

@bryant1410

This comment has been minimized.

Show comment Hide comment
@bryant1410

bryant1410 Aug 14, 2016

There's an extra ' in jshint definition and double space in browserify definition.

htmlmin dependency is missing, and I think it doesn't accept -c nor -s flags.

Also, during build, when is copied the html to tmp and when is browserify called?

There's an extra ' in jshint definition and double space in browserify definition.

htmlmin dependency is missing, and I think it doesn't accept -c nor -s flags.

Also, during build, when is copied the html to tmp and when is browserify called?

@scottpham

This comment has been minimized.

Show comment Hide comment
@scottpham

scottpham Dec 2, 2016

Hi, question about this--don't the rm -rf commands delete the folder itself? What creates the folder again?

Also, you have ccsmin as a dependency but it doesn't appear to be used

Hi, question about this--don't the rm -rf commands delete the folder itself? What creates the folder again?

Also, you have ccsmin as a dependency but it doesn't appear to be used

@mauron85

This comment has been minimized.

Show comment Hide comment
@mauron85

mauron85 Dec 24, 2016

Isn't cp with glob patterns only available in zsh? Not in bash.

EDIT. There is npm package that support glob patterns and can be used in npm scripts.

https://github.com/jonschlinkert/copy

...
  "scripts": {
    "clean:dist": "rimraf dist",
    "copy:dist": "copy res/**/*.{png,json,js,css,svg} dist/",
  },
  "devDependencies": {
     "copy": "^0.3.0",
     "rimraf": "^2.5.4"
  }
...

mauron85 commented Dec 24, 2016

Isn't cp with glob patterns only available in zsh? Not in bash.

EDIT. There is npm package that support glob patterns and can be used in npm scripts.

https://github.com/jonschlinkert/copy

...
  "scripts": {
    "clean:dist": "rimraf dist",
    "copy:dist": "copy res/**/*.{png,json,js,css,svg} dist/",
  },
  "devDependencies": {
     "copy": "^0.3.0",
     "rimraf": "^2.5.4"
  }
...
@misterbrownlee

This comment has been minimized.

Show comment Hide comment
@misterbrownlee

misterbrownlee Jan 6, 2017

I found copy src/*.txt dist was creating dist/src/robots.txt. I didn't find it clear how to make copy behave more like cp would in creating the output dist/robots.txt. The cpx module was a little less confusing, but it's still not ideal. For any heavy copying or resource shuffling I tend to write tasks/copy-stuff.js as an script file and just map "copy-foo" to "./tasks/copy-stuff.js" in my scripts block. Then I can create promise based tasks with whatever complexity I need. 👍

misterbrownlee commented Jan 6, 2017

I found copy src/*.txt dist was creating dist/src/robots.txt. I didn't find it clear how to make copy behave more like cp would in creating the output dist/robots.txt. The cpx module was a little less confusing, but it's still not ideal. For any heavy copying or resource shuffling I tend to write tasks/copy-stuff.js as an script file and just map "copy-foo" to "./tasks/copy-stuff.js" in my scripts block. Then I can create promise based tasks with whatever complexity I need. 👍

@felixdorner

This comment has been minimized.

Show comment Hide comment
@felixdorner

felixdorner Feb 16, 2017

Sometimes you need to concat scripts within a folder in the right order. For me uglifyjs seems not to take care about the order of scripts. Did anyone find a solution on how to concat and uglify all scripts in a folder ordered by name? I refer to this line:

"uglify:dist": "uglify src/js/**/*.js > dist/js/script.min.js"

Cheers and thanks for sharing this gist!

Sometimes you need to concat scripts within a folder in the right order. For me uglifyjs seems not to take care about the order of scripts. Did anyone find a solution on how to concat and uglify all scripts in a folder ordered by name? I refer to this line:

"uglify:dist": "uglify src/js/**/*.js > dist/js/script.min.js"

Cheers and thanks for sharing this gist!

@robsonsobral

This comment has been minimized.

Show comment Hide comment
@robsonsobral

robsonsobral Jul 24, 2017

npm-run-all is great to run parallel or sequential scripts.

npm-run-all is great to run parallel or sequential scripts.

@jasonhulbert

This comment has been minimized.

Show comment Hide comment
@jasonhulbert

jasonhulbert Aug 15, 2017

This is nothing new or ground-breaking but worth pointing out here for others that find this.

Instead of running the entire build when a change occurs on any file, prefer to run only the script/task related to the changed file. Personally, I like chokidar-cli for this purpose.

In the command that you want chokidar to run on file change (passed via the -c argument) you can use grep to check for a pattern in the changed file path and respond accordingly.

...
"watch": "chokidar './src/**/*' -c 'if grep -q \".scss\" \"{path}\"; then npm run sass; elif grep -q \".html\" \"{path}\"; then npm run html; fi;'",
"sass": "node-sass ./src/scss/main.scss -o ./dist/css/",
"html": "cpx './src/**/*.html' ./dist"
...

In the above example, if the file path contains .scss the sass script runs. If the path contains .html the html script runs.

Furthermore, you can combine this with npm script arguments to pass the file path along to the given script. For example...

...
"watch": "chokidar './src/**/*' -c 'if grep -q \".scss\" \"{path}\"; then npm run sass; elif grep -q \".html\" \"{path}\"; then npm run html -- \"{path}\" ./dist; fi;'",
"sass": "node-sass ./src/scss/main.scss -o ./dist/css/",
"html": "cpx"
...

So, in this example we're passing the {path} variable provided by chokidar to the html script so only the single, changed file is processed. Benefits are speed and fewer browser reloads when using lite-server or browser-sync. And it's freakin' sweet.

jasonhulbert commented Aug 15, 2017

This is nothing new or ground-breaking but worth pointing out here for others that find this.

Instead of running the entire build when a change occurs on any file, prefer to run only the script/task related to the changed file. Personally, I like chokidar-cli for this purpose.

In the command that you want chokidar to run on file change (passed via the -c argument) you can use grep to check for a pattern in the changed file path and respond accordingly.

...
"watch": "chokidar './src/**/*' -c 'if grep -q \".scss\" \"{path}\"; then npm run sass; elif grep -q \".html\" \"{path}\"; then npm run html; fi;'",
"sass": "node-sass ./src/scss/main.scss -o ./dist/css/",
"html": "cpx './src/**/*.html' ./dist"
...

In the above example, if the file path contains .scss the sass script runs. If the path contains .html the html script runs.

Furthermore, you can combine this with npm script arguments to pass the file path along to the given script. For example...

...
"watch": "chokidar './src/**/*' -c 'if grep -q \".scss\" \"{path}\"; then npm run sass; elif grep -q \".html\" \"{path}\"; then npm run html -- \"{path}\" ./dist; fi;'",
"sass": "node-sass ./src/scss/main.scss -o ./dist/css/",
"html": "cpx"
...

So, in this example we're passing the {path} variable provided by chokidar to the html script so only the single, changed file is processed. Benefits are speed and fewer browser reloads when using lite-server or browser-sync. And it's freakin' sweet.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment