HTML5 technology sharing: front-end automation tools recommended

With the development of front-end development technology, the front-end development work is becoming more and more complex, if you can use some automated tools reasonably, life is much easier.

Livereload

My current development main machine is an earlier 13-inch Macbook Pro, plus a Dell monitor. Believe that the front-end development of all know, this more than a monitor on the efficiency of the increase in how much.

Livereload Technology + Two displays can help you eliminate the tedious task of repeatedly refreshing the browser. There are many ways to implement livereload, if you prefer a graphical desktop application, you can try Livereload.app, the address is: Https://github.com/livereload/LiveReload, this app has For Mac and Windows, it's easy to use the graphical interface to set up the folder where you need to listen for files, and then insert a script into the HTML page.

Livereload.app

If you like me more than the command line, you can install livereload using the following command.

NPM I Livereload-g

The next step is to install the Chrome plugin, which is: Https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei

To use it, simply execute livereload in the working directory and then click on the plugin icon in Chrome to start listening.

Webpack

Now, the front-end development, usually also involves the preprocessor, although the diversification of technology has brought us more choices, but the code generated by these technologies in the browser to achieve consistent performance, but also to convert it to browser-supported types.

The Webpack is a modular loading and packaging tool, and the rich plugin makes this tool very useful. While Grunt and Gulp are now popular as two front-end automation tools, the Webpack combination of NPM scripts is sufficient for most occasions.

Installation of Webpack is very simple and recommended for direct global installation

$ NPM Install Webpack-g

You may also need to install the corresponding loader, such as JSX loader, less loader, which is recommended to be installed under the project folder.

$ npm Install css-loader style-loader less-loader jsx-loader--save-dev

You only need to define the loader in the Webpack configuration file, and the various Popular front-end development techniques will work with you. For more Webpack users, please refer to the official documentation: Django-webpack-loader

If you're using Django, Django-webpack-loader is a webpack plugin you can't miss.

We all know the importance of browser caching for page loading, and we hope that when the resource file changes, the page will instantly change to the user.

The usual practice is to use the hash value of the resource file as part of the resource address, such as Main-cf4b5fab6e00a404e0c7.js,webpack, although it supports this naming method, it can be set in the configuration file as follows.

Config.output.filename = ' [Name]-[hash].js ';

If you do not have the anti-Automatic update resource file in the page link, django-webpack-loader solve this problem.

Django-webpack-loader is divided into two parts, part of the Webpack plug-in, part of the Django application, installed as follows:

NPM Install--save-dev Webpack-bundle-tracker

Pip Install Django-webpack-loader

The configuration work needs to be done separately in Webpack and Django, and the configuration method can refer to the Project home page (Https://github.com/owais/django-webpack-loader).

Source: Qian Feng HTML5

HTML5 technology sharing: front-end automation tools recommended