Swiss knife for front end web development
14 Jul 2015Swiss Knife for front end Web development
Scaffolding
Yeoman
Yeoman provide a generator ecosystem, helps you to kickstart new projects, prescribing best practices and tools to help you stay productive.
A generator is basically a plugin that can be run with the yo command to scaffold complete projects or useful parts.Yeoman provided official generators for the most pupular frameworks,such as AnguarJS,Backbone, Polymer etc.
The Yeoman workflow comprises three types of tools for improving your productivity and satisfaction when building a web app: the scaffolding tool (yo), the build tool (Grunt, Gulp, etc) and the package manager (like Bower and npm).
It is rather hard to install Yeoman under Windows and China, something to be comment here:
-
change npm registry source: npm config set registry https://registry.npm.taobao.org
-
install yo: npm install -g yo
-
Manually add this path to Windows PATH: C:\Users\Simon\AppData\Roaming\npm
Dependency management
Bower
Bower is the package manager for Web.
NPM
NPM is the package manager for Node.It comes with Node now.
Browserfy
Browsers don’t have the require method defined, but Node.js does. With Browserify you can write code that uses require in the same way that you would use it in Node by bundling up all of your dependencies.
Build Systems
WebPack
webpack is a module bundler.
webpack takes modules with dependencies and generates static assets representing those modules.
Grunt
Grunt is the JS task runner, same as Ant for Java.The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes.
Grunt use the Gruntfile.js or Gruntfile.coffee configuration file, which is a valid JavaScript or CoffeeScript file that belongs in the root directory of your project.
Gulp
Gulp is another JS task runner, which use Node streaming build system and aims to replace Grunt.
By preferring code over configuration, gulp keeps things simple and makes complex tasks manageable.
Brunch
Brunch is a builder. Not a generic task runner, but a specialized tool focusing on the production of a small number of deployment-ready files from a large number of heterogenous development files or trees.
Brunch also support Skeletons which is basically an application boilerplate that provides a good starting point for new applications, same as Yeoman generator does.
Broccoli
Broccoli is a less popular, fast, reliable asset pipeline, supporting constant-time rebuilds and compact build definitions.