前端自动化和前端开发环境

标签：

开发环境

Node.js npm

Node.js is a JavaScript runtime built on Chrome‘s V8 JavaScript engine.

Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient.

Node.js‘ package ecosystem, npm, is the largest ecosystem of open source libraries in the world.

package.json 是npm的配置文件

dependencies 与 devDependencies 的区别

devDependencies 下列出的模块，是我们开发时用的，比如 grunt-contrib-uglify，我们用它混淆 js 文件，它们不会被部署到生产环境。

dependencies 下的模块，则是我们生产环境中需要的依赖。

在项目的根目录下运行下面的命令，这些插件就会被自动安装在node_modules子目录。

npm install

上面这种方法是针对已有package.json的情况。如果想要自动生成package.json文件，可以使用npm init命令，按照屏幕提示回答所需模块的名称和版本即可。

npm init

如果已有的package.json文件不包括Grunt模块，可以在直接安装Grunt模块的时候，加上–save-dev参数，该模块就会自动被加入package.json文件。

npm install <module> --save-dev

比如，对应上面package.json文件指定的模块，需要运行以下npm命令。

npm install grunt --save-dev
npm install grunt-contrib-jshint --save-dev
npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-watch --save-dev

Git

Git  is a version control system that is used for software development and other version control tasks.

版本管理工具 分布式 

Grunt

Grunt：任务自动管理工具

安装grunt之前需要先安装grunt-cli， grunt-cli表示安装的是grunt的命令行界面

In one word: automation. The less work you have to do when performing repetitive tasks(重复性任务) like minification, compilation, unit testing, linting,(压缩，编译，单元测试) etc, the easier your job becomes. After you‘ve configured it through a Gruntfile, a task runner can do most of that mundane work for you—and your team—with basically zero effort.

Grunt and Grunt plugins are installed and managed via npm, the Node.js package manager.(依赖于node.js)

Gruntfile.js，它是grunt的配置文件

grunt的常用模块

• grunt-contrib-clean：删除文件。
• grunt-contrib-compass：使用compass编译sass文件。
• grunt-contrib-concat：合并文件。
• grunt-contrib-copy：复制文件。
• grunt-contrib-cssmin：压缩以及合并CSS文件。
• grunt-contrib-imagemin：图像压缩模块。
• grunt-contrib-jshint：检查JavaScript语法。
• grunt-contrib-uglify：压缩以及合并JavaScript文件。
• grunt-contrib-watch：监视文件变动，做出相应动作。

一份Gruntfile.js的样板

Gulp

与grunt相同，也是一个自动化工具，依赖于node.js

bower

 Bower doesn’t concatenate or minify code or do anything else - it just installs the right versions of the packages you need and their dependencies.

http-server

http-server is a simple, zero-configuration command-line http server.(简单的、“零”设置的、命令行的http服务器) It is powerful enough for production usage, but it‘s simple and hackable enough to be used for testing, local development, and learning.

前端自动化和前端开发环境

标签：

原文地址：http://www.cnblogs.com/oneplace/p/5638419.html