Home >Web Front-end >HTML Tutorial >Recommended front-end automation tools
With the continuous development of front-end development technology, front-end development work has become more and more complex. If you can use some automated tools reasonably, life will be much easier.
My current main development machine is an earlier 13-inch Macbook Pro, plus a Dell monitor. I believe anyone who does front-end development knows how much this extra monitor can improve work efficiency.
LiveReload technology + two displays can help you save the boring work of repeatedly refreshing the browser. There are many ways to implement LiveReload. If you prefer a graphical desktop application, you can try LiveReload.app. This application has both Mac and Windows versions. It is also very simple to use. You can set the location of the file to be monitored through the graphical interface. folder, and then insert a script into the HTML page.

If you prefer the command line like me, you can use the following commandInstall LiveReload.
npm i livereload -g
When using it, you only need to execute livereload
in the working directory, and then click the plug-in icon in Chrome to start monitoring.
Now doing front-end development usually involves preprocessors. Although the diversification of technologies brings us more choices, the code generated by these technologies must be browsed To obtain consistent performance in the browser, you must convert it into a type supported by the browser.
Webpack is a module loading and packaging tool. Its rich plug-ins make this tool very practical. Although Grunt and Gulp are now very popular as two front-end automation tools, in fact Webpack combined with Npm scripts is enough in most situations.
Installing Webpack is very simple, it is recommended to install it globally directly
$ npm install webpack -g
You may also need to install the corresponding loader, such as JSX loader, Less loader, this part of the package is recommended 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 configuration file of webpack, and various popular front-end development technologies are at your disposal.
For more Webpack users, please refer to the official documentation.
If you are using Django, django-webpack-loader is a Webpack plug-in that you cannot miss.
We all know the importance of browser caching to page loading speed. At the same time, we also hope that when resource files change, the page can immediately present changes to the user.
The usual approach is to use the hash value of the resource file as part of the resource address, such as <a href="http://www.php.cn/wiki/646.html" target="_blank">main</a>-cf4b5fab6e00a404e0c7.js
, although Webpack supports This naming method can be set in the configuration file as follows.
config.output.filename = '[name]-[hash].js';
But there is no way to automaticallyUpdateThe link of the resource file in the page. django-webpack-loader solves this problem.
django-webpack-loader is divided into two parts, one is the Webpack plug-in and the other is the Django application. The installation method is as follows
npm install --save-dev webpack-bundle-tracker pip install django-webpack-loader
The configuration work needs to be done in Webpack and Django respectively. The specific configuration method Please refer to the project homepage (https://github.com/owais/django-webpack-loader).
WeFlow is a front-end recently launched by the Tencent team Develop workflow tools. The functional features stated on the official website include:
Automated process
Less -> CSS (Sass can be used by yourself Customized)
CSS Autoprefixer Prefix auto-completion
Automatic generationPicture CSS Properties, width & height etc
CSS compression cssnano
CSS Sprite sprite synthesis
Retina @2x & @3x automatically generates adaptation
imagemin image compression
JS Merge and Compression
EJS Template Language
Debugging & Deployment
Monitor file changes and automatically refresh the browser (LiveReload)
FTP release deployment
ZIP Project packaging
Solution integration
px -> rem compatible adaptation Solution
Intelligent WebP Solution
To cache file Reversion (MD5) Solution
Students who like graphical interfaces can give it a try

In addition to free tools, there is also a paid tool worth mentioning. CodeKit is a well-established front-end development auxiliary tool for Mac, currently priced at US$32. Although it is not cheap, it is powerful. It claims to be able to compile all current front-end scripts, supports automatic browser refresh, has built-in Bower, and the installation of third-party packages can be completed with just one click. The graphical interface is also very convenient to operate, so students who are not short of money can consider it.
The above is the detailed content of Recommended front-end automation tools. For more information, please follow other related articles on the PHP Chinese website!