keithamus / npm-scripts-example

An example of how to use NPM scripts over Grunt/Gulp & Friends. http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool
MIT License
841 stars 101 forks source link

Dependencies example - how to use 3rd party libraries #26

Open dandv opened 9 years ago

dandv commented 9 years ago

The current example only has devDependencies. How would one intelligently use 3rd party libraries, which unlike when installing with bower, tend to arrive in non-standard directories?

So far, I've had to include paths manually to each .js file; there wasn't really a way to glob for dependencies, unless I'm missing something.

{
  "name": "idr-website",
  "version": "1.0.0",
  "description": "iDoRecall website",
  "main": "index.html",
  "scripts": {
    "prebuild:css": "wget http://cdn.jsdelivr.net/normalize/latest/normalize.css -q -O tmp/normalize.css",
    "build:css": "lessc --autoprefix src/index.less > tmp/index.css && cleancss tmp/normalize.css tmp/index.css -o dist/index.css",
    "build:js": "uglifyjs node_modules/asteroid/node_modules/ddp.js/src/ddp.js node_modules/asteroid/node_modules/q/q.js node_modules/asteroid/dist/asteroid.browser.js src/index.js --source-map --screw-ie8 -c -m -o dist/bundle.js",
...
}

Is there a smarter way to include those libraries from node_modules, asteroid, ddp and q?

This seems to make it impossible to generate proper source maps with UglifyJS2 because there's no constant number of directories to tell uglifyjs to drop via the -p parameter.

Similar question for the awkward normalize.css fetching.

tunnckoCore commented 9 years ago

@dandv

I think almost all of the "bower" packages are also in the npm, so no problem, otherwise suggest them to publish to npm.

Is there a smarter way to include those libraries from node_modules, asteroid, ddp and q?

Just include/require them some where. As I can see, src/index.js, so then just (browserify and) uglify the index.js

src/index.js

var Q = require('q')
var aseroid = require('asteroid')

///////
// your stuff

or even, you just can require them without assign them to variables, if you dont need them.

keithamus commented 9 years ago

@dandv browserify and postcss are great for this. Just install the libs as normal dependencies (for example npm install --save jquery), and then simply require them using your client side code (var $ = require('jquery')). Have a task like browserify to bundle all of this up for you, and voilà!

Same goes for CSS, simply use something like postcss-import to do the same thing. E.g. npm install --save normalize.css and then in the css write import 'normalize.css' - and once again, you have a single working css file.