Recently, I wondered about finding tools for developing mobile applications in html / css. Of the requirements were: availability, lightness, ease of setup. The choice fell on the built-in Node NPM manager. NPM contains
tools for basic tasks such as install and running custom scripts. Also NPM is not as bulky as Grunt and does not require adaptation of modules for itself, because launches modules from the command line.

NPM as a developer tool

NPM can organize the work of existing modules among themselves. Yes,
sometimes the solutions are not elegant and inferior to Grunt, but each task should have the appropriate tools. Because NPM just starts the
modules through the command line, then you do not need to create or wait for the missing
module, most likely it is already implemented.

NPM Installation

The nice thing about NPM is that it is installed with you if Node.JS is installed. You only need to write a configuration file and you
can perform basic steps to build and test your projects.

NPM config example

{
  "name": "FrontendTemplate",
  "description": "",
  "author": "Sergei Z.",
  "scripts": {
  },
  "dependencies": {
  },
  "devDependencies": {
  }
}

In this case, we are interested in the devDepencies and scripts blocks. In devDepencies we indicate which modules we will use in development. In scripts we create scripts for assembly, testing of the project.

Let's add a couple of useful modules.

{
  "name":" FrontendTemplate",
  "version": "0.0.1",
  "description": "",
 "repository": "",
  "author": "Sergei Z.",
  "dependencies": {
  },
  "devDependencies": {
    "supervisor": "*",
    "jshint": "~1.1.0",
    "less": "~1.3.3",
    "jade": "*",
    "uglify-js2": "*"
  }
}

Jade. The Jade template engine module will be used to generate our html.
Uglify-JS2. Module to minimize JS code.
Less. Module for compiling css from less files.
JSHint. Module for checking JS code for quality. I highly recommend using it.
Supervisor A module for launching JS applications or commands when changing files in a directory.


We save this in package.json. Go to the directory and run npm install. NPM will load the modules into the node_modules directory.
This is only the installation of modules, as for their launch, you need to add the scripts section to our config.
We will also need UnixUtils on Windows.

{
  "name": "frontendTemplate",
  "version": "0.0.1",
  "description": "",
  "scripts": {  
    "less": "cat src/less/*.less > build/app.less.temp && lessc -x ./build/app.less.temp > ./build/css/app.css && rm -f build/app.less.temp",
    "uglify": "cat src/js/lib/*.js src/js/*.js > build/app.js.temp && uglifyjs2 -o build/js/app.min.js build/app.js.temp && rm -f build/app.js.temp",
    "jade": "jade --out build/ src/jade/index.jade",
    "build": "npm run less && npm run uglify && npm run jade",
    "start": "npm run build",
    "watch": "supervisor --watch src--extensions less,js,jade --no-restart-on exit --exec npm -- run build"
  },
  "repository": "",
  "author": "Sergei Z.",
  "dependencies": {
  },
  "devDependencies": {
    "supervisor": "*",
    "jshint": "~1.1.0",
    "less": "~1.3.3",
    "jade": "*",
    "uglify-js2": "*"
  }
}

less script compiles less from the src / less folder in css and puts it in the build / css
folder uglify-js2 script minimizes all js code from the src folder, including libraries from the lib folder and puts it in the build / js folder
jade script compiles html from the src folder / jade and puts it in build
build Alternately runs the less, uglify and jade
start scripts Alias ​​for the Build
watch starts the supervisor and looks at the src directory and when changing files with the less extension, js, jade runs the build


script You can run any of the scripts with the npm run command % commandname%. For example, npm run build. For example, npm run build to build a project or npm run watch to monitor the directory and rebuild if files change.

NPM and TDD \ BDD

I use tests for my projects, so I also screwed Mocha and PhantomJS to test my code. What came of this can be seen here

IDE Integration

Because Since NPM uses the command line, integrating NPM with the IDE becomes a very simple task. For example, the Shell Turtlestein extension for Sublime Text 2 allows you to run commands from the IDE and watch the output of commands directly from the IDE.

Conclusion

Node.JS provides good tools for frontend development and it does its job well if you have a small project and you can manage it from the command line, but it is not flexible enough if you need advanced project management. In this case, it's best to look at Grunt.