Front-end automation construction-requirements and tools selection

Today suddenly a whim, want to put the front-end of some manual workflow automation, in fact, has been in use grunt for automated construction, but always feel that some things are not done. First of all, the front-end needs to do those automation:

1. First, the HTML, each page of each project needs a unified head, other headings, keywords, authors, such as meta-self-modification, body part of each page is filled, but the use of the framework unified.

2. CSS, I use less to write, so need to compile into CSS, in addition, the compilation process, some CSS properties need to automatically add browser prefixes, such as Border-radius, attributes are best automatically sorted by type, some CSS writing details automatically help me complete. At the same time, the compiled CSS needs to be compressed, merging is not so-called, because the CSS is usually not a large number.

3. JS, this I was jquery+seajs+underscore+backbone this framework to write front-end modularity and implementation of the MVC architecture, large projects, small projects on the direct jquery Coding (Introduction page, download page, etc.). But after my third consideration, I decided to replace Seajs with Requirejs, the code is not very small, because many open source projects are supported by the AMD reference, to support the CMD reference need to add a few lines of source code, perhaps Seajs is written by the Chinese, so the foreign framework support is not much, In addition, I think Requirejs's dependency injection design is better, but Seajs is still very strong. The need to say back to JS, the most commonly used is compression, the other is the merger, the third is the detection of grammar.

4. Picture, image material is basically appropriate compression, if the UI designer to give the material is not compressed.

Well, the front end I don't have every detail listed, but the usual requirements are those above, the solution,

1. HTML, the block is easy to solve, simply write a bin script, copy the template HTML.

2. CSS, I use grunt for automated construction, grunt-contrib-less This module, the specific configuration method can refer to the official website, as for the automatic prefix, I used the Less-plugin-autoprefix this module, speaking of this template, There are a few points to note, first, less must be updated version, I was still using 1.7.0, later upgrade to the latest 2.4.0 to take effect, second, the configuration Autoprefix browser range is, the official website example is browsers: ["Last 2 Versions"], In fact, you can not see the effect, because that configuration means that the current mainstream browser to use the latest 2 version of the support to decide whether to prefix, so I changed the configuration to a larger number, need to support the latest 20 versions, Ha ~. Third, the property is automatically sorted, this I found a tool can do this thing, but not grunt plug-in, is for the CSS, not for less, called Csscomb, there is sublime text editor plug-in version, but plug-ins can not be batch processing, so it is recommended to use the Nodejs interface to call , batch processing. Four, compression, this simple, one is grunt-contrib-less has an option parameter, Compress:true, and the other is using grunt-contrib-cssmin this module. Combining the above four functions, the build order is that 1.grunt-contrib-less compiles less files into css,2. Less builds when you add the plugins plug-in less-plugin-autoprefix,3. Custom tasks to complete the automatic sorting of CSS properties this function, 4. Compress the css,5. It is necessary to use the Grunt-contrib-concat module to merge files.

3. js, compression I use grunt-contrib-uglify, although not the most compressed, but grunt support, compression ratio OK, combined use grunt-contrib-concat, detection using Grunt-contrib-jshint, Compile the coffee file using Grunt-contrib-coffee, copy the file using Grunt-contrib-copy, but because of the use of modular, so the merger can not simply connect the contents of the file, Requirejs seems to provide a solution, Automatically according to the referenced module, merge JS and compress, next article I say this again, because I have not finished the practice.

4. Picture, nothing, with grunt-contrib-imagemin configuration on the line.

Probably the front end of the automation construction finished half, you have what needs to add, I add a few questions:

1. Automated construction, usually on the side of development I will listen to file changes, such as less change recompile, JS re-compression, etc., this monitoring tool I use the Grunt-contrib-watch module, run command line Grunt watch to run the configured watch task, You can run the default task once in a grunt before you go online. But there is a pit daddy problem, is to add a new file, watch is not added to the listener list, to restart to listen to the new file, and then found to be the file path, with the relative current path to listen to the new file, with absolute path can only listen to the runtime files. For example

Watch
APP_JS:
Files: ["static/js/app/**/*.js"]//D:\code\xxx\static/js/app/**/*.js just can't
tasks: [' Uglify:app ', ' jshint ']
Options
Spawn:false
Interrupt:true

2. Please update the software version and module version to support those features, today also looked at Yeoman this thing, in fact, is divided into three parts, yo is responsible for generating template code, grunt responsible for building, Bower is responsible for the management of front-end resource package, but template is a template, not necessarily suitable for my project's code structure, And he installs a bunch of stuff, so I'm useless (while installing Yo is required Nodejs version and NPM version update), grunt use, bower is not used, mainly because he just do a download github project the entire code functionality, and fixed download tobower_components，对于前端调用和我的构建机制不方便，个人选择而已。

The article is not well-organized, but in order to avoid the old time, technology forget 7788 when, found that they have been bitter force of efforts, did not leave a trace, so ~ ~ record when the programmer's bitter force research, haha!

Front-end automation build-requirements and tool selection