前端自动化工作流 (一)准备工作

三年前开始接触前端,经历了从原始逐渐过度到工业化的过程,趁着事件不是太久,把曾经遇到的问题整理出来,给自己做个备份,也给希望能给别人提供一点点微不足道的帮助。

安装基础环境(尽可能把工具安装全一些,以减少可能遇到的问题)

windows系统

1.安装nodejs(自动化的前提,https://nodejs.org)

2.安装ruby(某些node工具需要ruby环境,https://www.ruby-lang.org)

3.安装python(某些node工具需要python环境,https://www.python.org/)

4.安装grunt(主要前端自动化工作都由grunt相关工具实现,http://www.gruntjs.net/)

5.安装yeoman(使用yeoman创建和管理项目,http://yeoman.io/)

6.安装bower(使用bower管理静态资源,http://bower.io/)

7.安装git(bower管理的静态资源会使用git下载,windows下建议安装gthub客户端,其中提供的gitshell可以解决windows命令行比较差的问题,https://desktop.github.com/)

8.安装sass(如果项目使用sass编写css样式,需要安装sass)

linux和mac系统

在linux和mac系统理论上来说更容易了

mac系统下可以先安装brew(http://brew.sh/)

至于是选择windows还是类unix系统,我个人觉得各自有各自的优缺点,看个人喜好了

时间: 2024-08-16 19:38:55

前端自动化工作流 (一)准备工作的相关文章

Gulp构建前端自动化工作流之:常用插件介绍及使用

在对Gulp有了一个初步的了解之后,我们开始构建一个较为完整的Gulp开发环境. 本文主要分为6个段落: 1. 构建项目目录结构(Directory Structure Build) 2. 插件介绍及使用方法(Tasks and dependencies) 3. 扩展优化(Extend & Optimize Task) 4. 其他插件介绍(Other plug-ins) 5. 匹配规则(Match Files) 6. 注意事项(Attention) 关于Gulp的入门介绍及安装方法,可先去 <

# 流行框架第一天:构建前端自动化工作流环境

## 兩個問題 ## 学习目标 - 了解什么是Node,什么是NPM:(Node.js) - 掌握Bower的使用: - 熟练使用Less/Sass: - 搭建一个自己的自动化工作流环境: + 自动编译 + 自动合并 + 自动刷新 + 自动部署 - GIT 与 GITHUB + master 托管源文件 + gh-pages 托管部署文件 + 在github搭建自己的blog ## 为什么要有自动化的流程 - 在我们的开发过程中有大量的重复操作 - DRY Don't repeat yourse

Grunt安装配置教程:前端自动化工作流

Grunt这货是啥? Grunt 是一个基于任务的 JavaScript 项目命令行构建工具. 最近很火的前端自动化小工具,基于任务的命令行构建工具 http://gruntjs.com Grunt能帮我们干啥? 在开始介绍前,先向大家描述下面的场景: [场景1:项目开始前] 先建立一个 projA 的文件夹 再建 html css js images (建5个或以上文件夹,花费1分钟) 拷贝 CSS库(Yui Reset bootstrap)JS库(Requiet.js Seajs jQuer

浅谈构建前端自动化工作流程一 之 node

一.Node环境 1.什么是Node? Node.js类似于jquery.js,不是js文件,也不是一个js框架,而是Server side JavaScript runTime,服务端的一个JS运行时:Node中只能运行ECMScript,无法使用BOM和DOM:目前我们的JS是运行在浏览器内核中的:说到底就是一个JS运行环境. 2.Node的历史 Node.js 0.12.7版本,也就是官方版本,但是另一个分支是IO.js,他是社区的产物,不是官方的东西,io.js有很多新特性,迭代速度非常

前端自动化开发工作流

1. 前端自动化工作流简介 每种项目都有自己特定的开发流程.工作流程.从需求分析.设计.编码.测试.发布,一个整个开发流程中,会根据不同的情况形成自己独特的步骤和流程.一个工作流的过程不是一开始就固定的,而是随着项目的深入而不断地改进,期间甚至会形成一些工具.例如当年大神们在Linux写C语言,觉得每次编译好多文件好麻烦,就发明了makefile.不同代码的管理好麻烦,然后就发明了git.SVN等等. 一个工作流程的好坏会影响你开发的效率.开发的流程程度,然后间接影响心情,打击编码积极性.所以我

前端开发自动化工作流工具:JavaScript自动化构建工具grunt、gulp、webpack介绍

前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为庞大和复杂,代码维护.打包.发布等流程也变得极为繁琐,同时浪费的时间和精力也越来越多,当然人为的错误也随着流程的增加而增加了更多的出错率.致使每一个团队都希望有一种工具,能帮助整个团队在开发中能精简流程.提高效率.减少错误率.随之讨论自动化部署也越来越多,并且国内很多大型团队也都有自己成熟的自动化部

如何用webpack实现自动化的前端构建工作流

什么是自动化的前端构建流? 1. 自动补全css私有前缀,自动转化less\sass为css,自动转化es6\vue\jsx语法为js,自动打包小图片为base64以减少http请求,自动给js,css,甚至img加hash值,以避免浏览器缓存,自动合并压缩代码,自动刷新实时预览效果(甚至免刷新),可以按照自己喜欢的目录结构存放原始资源文件,为了方便手机等访问,不需要搭建apache.nginx等服务器实现http访问...... 如何快速开始 首先 git clone https://gith

构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)

通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 javascript 文件.多终端多浏览器同步测试的开发环境,并且还可以通过 piblish 命令对项目下的文件进行打包操作. 相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常

前端自动化开发之grunt

上篇文章介绍了前端模块化开发工具seaJs,利用seaJs我们可以轻松实现前端的模块化编程,参见http://www.cnblogs.com/luozhihao/p/4818782.html 那么今天我继续介绍前端开发的另一工具——grunt.关于介绍grunt文章网上已经存在很多,而本文主要结合自己的亲身实践来讲解利用grunt实现前端开发中代码的压缩及合并. 一.准备工作 再使用grunt之前,我们先要安装node.js,利用node的包管理工具npm来安装grunt node.js下载地址