适用grunt的注意点

0、使用grunt可以为前端开发省去很多工作量,与git版本控制器配合起来不要太完美,一般也都是这么用的;

1、先安装node.js,下载软件安装就行了,一般自带npm管理器;

2、通过npm安装grunt-cli,安装命令:npm install -g grunt-cli;g代表在全局环境下安装,cli代表的是命令行的意思;

     也就是把“grunt”这个词添加到全局命令行中,相当于在window环境下注册了grunt命令,因此在别的文件环境下输入grunt命令是有效的;

     在命令行中输入grunt,验证是否安装成功;

3、通过命令行进入将要开发的网站目录,输入命令:npm install grunt --save-dev,注意这是在局部环境安装的grunt插件;

     也就是让这个本地项目依赖grunt,查看package.json文件中的devdependencies对象,就多了“grunt”:“版本号”这几个字符;

  其实grunt也就是一个插件,它的功能就是用来管理其他的插件!所有的插件都是基于node环境的;

4、安装本地项目所需的其他依赖项(模块、插件),命令与安装grunt类似:npm install grunt-contrib-uglify --save-dev;

     查看package.json文件,又多了一个依赖项;

5、接下来就是配置--Gruntfile.js这个文件了,这个文件作用主要就是规定:在本地项目环境下,输入grunt命令时,电脑该如何操作文件;

     比如:压缩、合并、检查语法错误、把sass文件编译为css文件等等;以前这些都需要手工操作,现在只要输入grunt,就搞定了!

6、Gruntfile.js要符合node环境下模块化规范的写法,module.export = function(grunt){// 一些相关的配置},主要是进行三方面的配置;

     1)配置每个插件的具体操作过程,如操作项目文件夹的哪些文件,输入输出等等;

     2)加载依赖项,loadNpmTask——就是上面通过npm install 的插件;

     3)指明grunt命令要执行哪几个操作;

     

参考:

     【前端福利】用grunt搭建自动化的web前端开发环境-完整教程 

     Grunt 新手一日入门

     应用Grunt自动化地优化你的项目前端

posted @ 2015-12-07 15:00  flyromance  阅读(303)  评论(0编辑  收藏  举报