前端自动化html,前端自动化

先说下自动化之前的工作场景：

新建项目A文件夹，再在A文件夹里创建html、css、js、images所需的各个文件夹

将要用到的css文件(例如：reset.css，bootstrap等)，js文件(例如：Jquery，各种插件等)从以前的项目拷贝到当前项目中

准备的差不多了，开始切图。写代码，浏览器刷新看效果，改代码，浏览器刷新看效果，再改代码，再刷新。。。。。

如果在项目中用到 Less 或者 Sass，时不时的还需要将它们编译成css看效果

需要用到新插件的话，google一下，找到下载，按照文档说明拷贝到对应目录

切图完成之后。还要压缩css、js、图片，混淆js，单元测试等等。

其实就是题主目前的工作形式。

总结上面的开发流程，主要是下面四点：

开发环境初始化

样式、脚本的依赖管理

文件编译、压缩合并、混淆

自动化测试 等等

解决之道

通过一些很好用的自动化工具，我们可以将上面的各个部分都自动化，只需敲几个命令就可以走完整个流程，并及时得到运行结果的反馈。

对应的自动化工具：

开发环境初始化-----------------yeoman

样式、脚本的依赖管理----------bower

文件编译、压缩合并、混淆-----grunt及其插件

自动化测试 等等----------------karma等

注意：上面针对每一部分只列举了一个自动化工具，其实还有很多替代选择。例如：你可以用gulp 代替grunt

动手操作

我假设题主已经安装了这些工具，并了解基本用法。就拿题主的讲的bootstrap的例子来说：

打开命令行：

mkdir myapp  // 新建目录

cd myapp  // 进入目录

yo      //首先是通过yeoman 搭建开发目录

//按照提示，一步一步往下走

//命令执行完成后，会生成项目的目录结构

grunt serve     //开启开发服务器

// 接下来，就是切图，写HTML，css 的时候了

// 不过不用刷新，grunt 会监测文件变化，自动刷新

//这时，假设需要一个前端库了，假设是jQuery

bower install jquery

//这就把jquery 安装到了bower_components 目录下，可以直接引用

//这时，假设需要一个nodejs 库，来优化开发流程

npm install XXX --save-dev

上面只是说了关于前端自动化的一些内容。至于其它的：例如

版本控制 ：git

项目模块化

虚拟机 vargrant

总结

以上是编程之家为你收集整理的前端自动化全部内容，希望文章能够帮你解决前端自动化所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！