优秀程序员HTML5技术分享前端自动化工具推荐随着前端开发技术的不断发展，前端开发工作变得越来越复杂，如果一些自动化可以采用合理的工具，生活就容易多了。 LiveReload 我现在的开发主机是一台较早的13寸MacbookPro，外加一台戴尔显示器。相信做前端开发的都知道，这多出来的显示器能提高多少工作效率。 LiveReload技术+两个显示屏幕可以让你省去反复刷新浏览器的枯燥工作。目前LiveReload的实现方式有很多种。如果你更喜欢图形桌面应用，可以试试LiveReload.app，地址是：https://github.com/livereload...，这个应用有Mac和Windows版本，使用起来也很简单，设置通过图形界面在需要监控的文件所在的文件夹中，然后在HTML页面中插入一段脚本。 如果你像我一样更喜欢命令行，你可以使用以下命令安装LiveReload。 npmilivereload-g 接下来需要安装Chrome插件，地址为：https://chrome.google.com/web... 使用时只需需要在工作目录执行livereload，然后点击Chrome中的插件图标开始监控。 Webpack 现在做的是前端开发，一般都会涉及到预处理器。虽然技术的多样化给我们带来了更多的选择，但是这些技术生成的代码需要在浏览器中获得一致的性能。,并且必须转换为浏览器支持的类型。 webpack是一个模块加载打包工具，丰富的插件让这个工具非常好用。虽然Grunt和Gulp作为两个前端自动化工具非常流行，但实际上Webpack结合Npm脚本足以应对大多数场合。 安装Webpack很简单，建议全局安装 $npminstallwebpack-g 可能还需要安装相应的loader，比如JSXloader，Lessloader，这部分的包建议安装在项目文件夹下。 $npminstallcss-loaderstyle-loaderless-loaderjsx-loader--save-dev 只需在webpack配置文件中定义loader，各种流行的前端开发技术任你支配。更多Webpack用户请参考官方文档：django-webpack-loader 如果你正在使用Django，django-webpack-loader是你不可错过的Webpack插件。 我们都知道浏览器缓存对页面加载速度的重要性，我们也希望当资源文件发生变化时，页面能够立即将变化呈现给用户。 通常的做法是使用资源文件的hash值作为资源地址的一部分，比如main-cf4b5fab6e00a404e0c7.js。Webpack虽然支持这种命名方式，但是可以在配置文件中进行如下设置。 config.output.filename='[name]-[hash].js'; 如果没有办法自动更新页面中资源文件的链接，django-webpack-loader解决了这个问题。 django-webpack-loader分为两部分，一是Webpack插件，二是Django应用。安装方法如下： npminstall--save-devwebpack-bundle-tracker pipinstalldjango-webpack-loader 需要分别在Webpack和Django中进行配置。具体配置方法请参考项目主页（https://github.com/owais/djan.... 其他推荐：WeFlow WeFlow WeFlow是一款前端开发工作流工具最近由腾讯团队推出，官网声明的功能有： 1.自动化流程 Less->CSS（可定制Sass） CSSAutoprefixer前缀自动补全 自动生成图片CSS属性，宽高等 CSS压缩cssnano CSSSprite合成 Retina@2x&@3x自动生成适配 imagemin图像压缩 JS合并压缩 EJS模板语言 2.调试&部署 监控文件变化，自动刷新浏览器（LiveReload） FTP发布部署 ZIP项目打包 3。解决方案整合 px->rem兼容适配解决方案 SmartWebP解决方案 CachefileReversion(MD5)解决方案 喜欢图形界面的同学可以试试 CodeKit 另外免费工具，还有一个付费工具值得一提。CodeKit是老式的Mac前端开发辅助工具，目前售价32。虽然价格不便宜，但功能强大。它号称可以编译目前所有的前端脚本，支持浏览器自动刷新，内置Bower，第三方包的安装可以一键完成。图形界面操作起来也很方便，不缺钱的同学可以考虑一下。
