Recently, I wondered about finding a toolkit for developing mobile applications on html / css. Of the requirements were: accessibility, lightness, ease of setup. The choice fell on the built-in Node Manager NPM. NPM contains

toolkit for basic tasks such as install and running custom scripts. Also, NPM is not as cumbersome as Grunt and does not require modules to be adapted by itself, since runs modules from the command line.

NPM, as a developer tool

')

NPM can organize the work of already existing modules among themselves. Yes,

sometimes the solutions are not elegant and are inferior to Grunt, but each task must have the appropriate tools. Since NPM just runs

modules via 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 you have it installed if Node.JS is installed. You need to write only the configuration file and you

You will be able to perform basic actions to build and test your projects.

NPM example config

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

In this case, we are interested in devDepencies and scripts. In devDepencies, we specify which modules we will use in development. In scripts, we create scripts for building and testing a 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 Jade template engine, we will use to generate our html.

Uglify-JS2. Module to minimize the JS code.

Less. Module for compiling css from less files.

Jshint The module for checking the JS code for quality. I strongly advise to use.

Supervisor. Module to run JS applications or commands when changing files in the directory.





We save it in package.json. Go to the directory and run npm install. NPM will load modules into the node_modules directory.

This is only the installation of the modules, as for their launch, then you need to add the scripts section to our config. Also

we 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": "*" } } 

The less script compiles less from the src / less folder in css and puts it in the build / css folder.

The uglify-js2 script minimizes all js code from the src folder, including libraries from the lib folder, and puts it into the build / js folder

jade script compiles html from src / jade folder and puts it into build

build Alternately runs the scripts less, uglify and jade

start Alias ​​for Build

watch starts supervisor and looks after the src directory and when changing files with less, js, jade extension runs the build script





You can run any of the scripts using the npm run% commandname% command. 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 it you can see here

IDE integration

Since NPM uses the command line, then integrating NPM with 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 commands directly from the IDE.

Conclusion

Node.JS gives you a good toolkit for frontend development and it does an excellent job if you have a small project and can manage it from the command line, but it is not flexible enough if you need advanced project management. In this case, it is better to look at Grunt.