好程序员HTML5技术分享前端自动化工具推荐

  • 时间:
  • 浏览:0
  • 来源:uu快3诀窍_uu快3app安卓_导航网

  许多推荐:WeFlow

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

  3.出理 方案集成

  去缓存文件 Reversion (MD5) 出理 方案

  除了免费的工具,还有一款付费工具值得一提。CodeKit 是Mac 下老牌的前端开发辅助工具,目前价格32美刀。虽然不便宜,但功能强大,号称还还可不可不可否编译目前所有的前端脚本,支持浏览器自动刷新,内置Bower,第三方包的安装只还可不可不可否一次点击即可完成。图形化的界面操作起来也很方便,不差钱的同学还还可不可不可否考虑。

  1.自动化流程

  我目前的开发主力机是一台较早的 13寸 Macbook Pro,外加一台戴尔的显示器。相信做前端开发的都知道,这多出来的一台显示器对工作效率单位的提升有多大。

  WeFlow

  使用时,只还可不可不可否在工作目录下执行livereload,有如果在 Chrome 中点击插件图标启动监听就还能够。

  imagemin 图片压缩

  智能 WebP 出理 方案

  Retina @2x & @3x 自动生成适配

  配置工作还可不可不可否分别在 Webpack 和 Django 中进行,具体配置法子 可参考项目主页(https://github.com/owais/django-webpack-loader)。

  CSS 压缩 cssnano



  2.调试 & 部署

  WeFlow 是最近腾讯团队推出的一款前端开发工作流工具,官网声明的功能形态学 包括:

  LiveReload

  你不可能 还还可不可不可否安装对应的加载器,比如 JSX loader, Less loader,这累积包建议安放进去项目文件夹下。

  监听文件变动,自动刷新浏览器 (LiveReload)

  CSS Sprite 雪碧图合成

  npm install --save-dev webpack-bundle-tracker

  接下来还还可不可不可否安装 Chrome 插件,地址是:https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei

  px -> rem 兼容适配方案

  npm i livereload -g

  $ npm install webpack -g

  CSS Autoprefixer 前缀自动补全

  喜欢图形化界面的同学还还可不可不可否试一试

  LiveReload 技术+两块显示屏还还可不可不可否帮你省去重复刷新浏览器这人枯燥的工作。目前实现 LiveReload 的法子 就说 ,不可能 你倾向于图形化的桌面应用,还还可不可不可否尝试一下 LiveReload.app, 地址是:https://github.com/livereload/LiveReload,这款应用一块儿有 Mac 版和 Windows 版,使用起来也很简单,通过图形界面设置好还可不可不可否监听文件所在的文件夹,有如果将一段脚本插入到 HTML 页面即可。

  django-webpack-loader 分为两累积,一累积是 Webpack 插件,一累积是 Django 应用,安装法子 如下:

  JS 合并压缩



  你只还可不可不可否在 webpack 的配置文件中定义好加载器,各种流行的前端开发技术随你使用。更多 Webpack 的用户请可参考官方文档:django-webpack-loader

  好守护线程池池员HTML5技术分享前端自动化工具推荐随着前端开发技术的不断发展,前端开发工作也变得那么 复杂化,不可能 能合理地采用许多自动化的工具,生活要容易得多。

  当我们都都 都知道浏览器缓存对页面加载效率单位的重要性,一块儿当我们都都 也希望当资源文件占据 变化时,页面能立刻向用户呈现变化。

  自动生成图片 CSS 属性,width & height 等

  通常的做法是将资源文件的 hash 值作为资源地址的一累积,比如main-cf4b5fab6e00a404e0c7.js,Webpack虽然支持这人命名法子 ,在配置文件中按如下法子 设置即可。

  FTP 发布部署

  不可能 你在使用 Django ,django-webpack-loader是一款你不可错过的 Webpack 插件。

  如没办反自动更新资源文件在页面中的链接,django-webpack-loader出理 的就说 这人什么的问题。

  不可能 你和我一样更喜欢命令行,还还可不可不可否使用如下命令安装 LiveReload。

  Less -> CSS (Sass 可自行定制)

  CodeKit

  EJS 模版语言

  安装 Webpack 非常简单,建议直接全局安装

  Webpack

  Webpack 是一款模块加载兼打包工具,富有的插件让这款工具非常实用。虽然现在 Grunt 和 Gulp 作为两款前端自动化工具非常流行,但虽然 Webpack结合Npm脚本在大多数场合就不可能 足够了。

  ZIP 项目打包

  livereload.app

  pip install django-webpack-loader

  现在做前端开发,通常后要涉及到预出理 器,虽然技术的复杂化给当我们都都 带来了更多选泽,但要哪些技术产生的代码在浏览器中获得一致的表现,还得将其转化为浏览器支持的类型。

  config.output.filename = '[name]-[hash].js';