https://github.com/caballerog/npm-build-tool

Using npm as a build tool
https://github.com/caballerog/npm-build-tool

Last synced: 4 days ago
JSON representation

Using npm as a build tool

• Host: GitHub
• URL: https://github.com/caballerog/npm-build-tool
• Owner: Caballerog
• Created: 2015-11-22T11:31:15.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2015-11-24T00:21:24.000Z (almost 9 years ago)
• Last Synced: 2024-10-12T08:28:18.789Z (about 1 month ago)
• Size: 9.77 KB
• Stars: 11
• Watchers: 2
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# npm-build-tool

Using npm as a build tool instead of Grunt or Gulp.

# Features

- Automatically lint your scripts.

- Automatically minify your HTML, CSS and JS using htmlminifier, css-clean and uglifyJS2.

- CSS Autoprefixing using PostCSS.

- Update the references in your html from orginals to an optionally versioned, optimized file using useref-file.

- Awesome image optimization using imagemin (You can use subfolder).

- Automatically wire-up dependencies installed with Bower using wiredep.

- Automatically create your JavaScript documentation using jsDoc.

- ~~Automatically create a hashmark in your new JavaScript file and CSS file for avoid cache problems.~~ (Problems with useref-file).

# Getting started

- Install dependencies: `npm install`.

- Configure your variables in `package.json`.

- Run `npm run build` to build your production code or run `npm run build:watch` to build your production code with watch feature.

# Configuration in package.json

- `"main"`: Index file of your app (Default src/).

- `"config"`: Configuration.

 - `"src"`: Top level folder of your source code.

 -  `"srcJS"`: List of your JavaScript source code to minify you can use glob (Default src/****/*.js).

 -  `"srcCSS"`: List of your CSS source code to minify you can use glob (Default src/****/*.css).

 -  `"srcImages"`: Folder of your images (Default src/assets/images/).

 -  `"distJS`: Production folder of your JavaScript (Default dist/js/).

 -  `"distCSS`: Production folder of your CSS (Default /dist/css/).

 -  `"distImages`: Productio folder of your images (Default dist/images/).

 -  `"distDoc`: Production folder of your JavaScript documentation (Default dist/doc/).

# Usage

-  `npm run build`: Build your production app.

-  `npm run build:watch`: Build your production app and watcher any change in your code.

-  `npm run:build:doc`: Build your jsDoc documentation.

-  `npm run build:images`: Minify your images.

-  `npm run clean`: Clean your production app.

-  `npm run clean:css`: Clean your CSS folder in your production app.

-  `npm run clean:js`: Clean your JS folder in your production app.

-  `npm run clean:images`: Clean your images folder in your production app.

-  `npm run lint:js`: Run Lint in your source JS code.

# More info

[How to use npm as a build tool](http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/) 

# TO-DO

- hashmark integration.

- autocreation of sprites.

- liveReload integration.

- Preprocessador CSS (e.g. using Less/SASS)

- AngularJS dependencies inyection.