{ | |
"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" | |
} | |
} |
This comment has been minimized.
This comment has been minimized.
Some other folks also experimenting with npm for task automation: |
This comment has been minimized.
This comment has been minimized.
Yeoman generator, setting up a full workflow with npm as the task runner: https://github.com/Munter/generator-npm-webapp |
This comment has been minimized.
This comment has been minimized.
I love the simplicity of using npm scripts for task running; thanks for sharing! A note: line 7 should be |
This comment has been minimized.
This comment has been minimized.
I'd change line 11 to: |
This comment has been minimized.
This comment has been minimized.
Using this on a new project I'm working on I was getting some NPM errors with jshint, this seemed to do the trick
Found that solution in this thread |
This comment has been minimized.
This comment has been minimized.
For the
|
This comment has been minimized.
This comment has been minimized.
"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! |
This comment has been minimized.
This comment has been minimized.
Thanks @mattcdowning. Should be fixed up now! |
This comment has been minimized.
This comment has been minimized.
Thanks for this! On line 7 there's a trailing single quote that should be removed |
This comment has been minimized.
This comment has been minimized.
@addyosmani I've not tested this, but it seems that there's something broken around the |
This comment has been minimized.
This comment has been minimized.
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 |
This comment has been minimized.
This comment has been minimized.
Based on @tnguyen14 and @gustavjorlov above, I would guess that line 18 should become: |
This comment has been minimized.
This comment has been minimized.
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? |
This comment has been minimized.
This comment has been minimized.
The shell version of the copy command would be |
This comment has been minimized.
This comment has been minimized.
Why not use a Makefile? Is it just for better Windows support? |
This comment has been minimized.
This comment has been minimized.
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/ ? 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. |
This comment has been minimized.
This comment has been minimized.
Things I'll try updating when I get the chance:
|
This comment has been minimized.
This comment has been minimized.
Add stylelint for CSS linting |
This comment has been minimized.
This comment has been minimized.
There's an extra ' in
Also, during build, when is copied the html to |
This comment has been minimized.
This comment has been minimized.
Hi, question about this--don't the Also, you have |
This comment has been minimized.
This comment has been minimized.
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
|
This comment has been minimized.
This comment has been minimized.
I found |
This comment has been minimized.
This comment has been minimized.
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:
Cheers and thanks for sharing this gist! |
This comment has been minimized.
This comment has been minimized.
npm-run-all is great to run parallel or sequential scripts. |
This comment has been minimized.
This comment has been minimized.
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
In the above example, if the file path contains Furthermore, you can combine this with npm script arguments to pass the file path along to the given script. For example...
So, in this example we're passing the |
This comment has been minimized.
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.