Grunt及其插件安装

系统:macos
操作:命令行操作
前提:Homebrew npm 安装完毕
最近学习React-Native,作为一个Android原生开发者,对前端知识只是大学期间学的一些基础,如果要彻底掌握这么一套开发技术,需要系统学习JavaScript,ES6规范等,做学习JavaScript的准备的时候,发现了一个前端构建工具Grunt, 工具很强大,网站标题都很精准,Grunt JavaScript世界的构建工具http://www.gruntjs.net/
为何要用构建工具?
直接引用网站的一句话:自动化。对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化工具可以减轻你的劳动,简化你的工作。当你在 Gruntfile 文件正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作。
建议各位通过官方手册安装,以下只是个人实践结果。
安装:

1 安装CLI

什么是grunt-cli,它将grunt命令添加到环境当中,并且控制每个项目使用的grunt版本,属于grunt的全局工具,最好在全局环境下安装:

npm install -g grunt-cli
安装grunt-cli 并测试了一下grunt命令

先列出我的最终完成目录,避免大家过程中造成迷茫:

➜  firstjs tree -L 1
.
├── Gruntfile.js
├── index.html
├── lib
├── node_modules
└── package.json

2 directories, 3 files

2 创建一个目标项目#

我们随便创建一个测试项目目录
/Users/pczhu/WorkSpace/javascript/firstjs
一般需要在你的项目中添加两份文件:package.json和 Gruntfile(此处不要命名为Gruntfile,往下看)。
package.json: 此文件被npm用于存储项目的元数据,以便将此项目发布为npm模块。你可以在此文件中列出项目依赖的grunt和Grunt插件,放置于devDependencies配置段内。
Gruntfile: 此文件被命名为 Gruntfile.js或 Gruntfile.coffee,用来配置或定义任务(task)并加载Grunt插件的。
此文档中提到的 Gruntfile其实说的是一个文件,文件名是 Gruntfile.js或 Gruntfile.coffee,所以请正确命名

package.json
应当放置于项目的根目录中,与Gruntfile在同一目录中,并且应该与项目的源代码一起被提交。在上述目录(package.json所在目录)中运行npm install将依据package.json文件中所列出的每个依赖来自动安装适当版本的依赖。下面列出了几种为你的项目创建package.json文件的方式:

  • 1 大部分grunt-init模版都会自动创建特定于项目的package.json文件。
  • 2 npm init命令会创建一个基本的package.json文件。
  • 3 复制下面的案例,并根据需要做扩充(说白了就是自己命名个文件然后把下面内容贴进去,修改一下)
{ 
  "name": "my-project-name",//你的项目名称(注释不需要)
  "version": "0.1.0",//你的版本(注释不需要)
  "devDependencies"://你的依赖和以后安装的插件都会列在这(注释不需要)
       { 
         "grunt": "~0.4.5", 
         "grunt-contrib-jshint": "~0.10.0",
         "grunt-contrib-nodeunit": "~0.4.1",
         "grunt-contrib-uglify": "~0.5.0" 
      }
}

我个人采用的方式自己搞了一个简单的package.json


我自己写的package.json

Gruntfile.js可以暂时不写。

3 安装Grunt

npm install

查看当前目录,生成了node_modules 文件夹,并且报warn如下:

npm WARN jsfirst@1.0.0 No description
npm WARN jsfirst@1.0.0 No repository field.
npm WARN jsfirst@1.0.0 No license field.

无视即可,不用管。
此时我的目录结构

➜  firstjs tree
.
├── node_modules
└── package.json

安装grunt

npm install grunt --save-dev

此时node_modules文件夹超级丰富,package.json文件也有所变化,自动在最下面添加了如下内容

 "devDependencies": {
   "grunt": "^1.0.1"
  }

4 安装插件模块

npm install <module> --save-dev

常用的插件列举如下
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:监视文件变动,做出相应动作。
grunt-contrib-stylus:stylus编写styl输出css 。
举例安装jshint 语法检查插件

npm install grunt-contrib-jshint --save-dev

想要一次性安装多个插件,如下

npm install --save-dev grunt-contrib-watch grunt-contrib-jshint grunt-contrib-copy

注意,此时这些插件是没有用的,因为需要配置,也就是Gruntfile.js

5 创建并修改Gruntfile.js

此部分参考

//最外层包装函数
module.exports = function(grunt) {
 //插件配置信息
  grunt.initConfig({
    //读取package.json中的项目配置,并且存储在pkg中,用于使用
    pkg: grunt.file.readJSON('package.json'),//一定注意各种逗号
    //此处填写各种插件的配置信息
    //jshint配置
    jshint: {
          options: {
                //大括号包裹
                curly: true,
                //对于简单类型,使用===和!==,而不是==和!=
                eqeqeq: true,
                //对于首字母大写的函数(声明的类),强制使用new
                newcap: true,
                //禁用arguments.caller和arguments.callee
                noarg: true,
                //对于属性使用aaa.bbb而不是aaa['bbb']
                sub: true,
                //查找所有未定义变量
                undef: true,
                //查找类似与if(a = 0)这样的代码
                boss: true,
                //指定运行环境为node.js
                node: true
            },//注意逗号
            //具体任务目录配置
            files: {
                src: ['src/*.js','Gruntfile.js']
            }
    },//**注意逗号分隔**
    watch: {
        another: {
            files: ['*.html', 'css/*', 'js/*', 'images/**/*','lib/*.js','src/*'],//监听文件
            options: {
               
                livereload: true//通过配置Chrome的livereload插件调试,所以直接用了true
            }
        }
    }//如果是最后不用逗号了
  });

  // 加载指定插件任务
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');
 // 开启命令时候默认执行的任务
  grunt.registerTask('default', ['jshint','watch']);
};

OK 保存好之后我们跑一下,在项目目录下grunt,我的文件直接是以上内容

grunt
运行成功的标志

Ctrl+C 即可关闭

6 实验

我们实验一下js校验,搞个文件目录lib/one.js,随便写点乱七八糟的错代码进去,保存,运行grunt。发现居然运行成功了,查看jshint的配置,发现配置文件目录为src: ['src/.js','Gruntfile.js'] 在这添加'lib/.js' 大家按照自己需求设置。
再次运行。提示了错误

错误提示证明插件起作用

现在我们新建一个正确的页面index.html
通过tomcat静态地址引入,这步大家可以自行查找一下,非常简单。通过Chrome浏览器科学上网,进入Chrome应用商店安装livereload插件,安装后会有如图所示图标:


安装插件

现在 启动tomcat 跑起来我们的页面

我的页面

项目根目录下执行命令

grunt

显示waiting

注意Chrome插件图标,点击该图标,图标中心圆圈会变成实心点

链接成功的插件

修改我们的界面内容,直接打开html文件修改即可,我们随便写个ABC,保存的瞬间注意观察浏览器,无需刷新无需重启,自动变化

成功研制watch插件

其他各种插件可以自己试验一下。各种配置可以查看相应文档 http://www.gruntjs.net/

推荐阅读更多精彩内容

  • 快速入门 Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器。Gru...
  • 快速入门 Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器。 在安...
    angelwgh阅读 258评论 0 0
  • Grunt是一个任务管理器,能大大提高您运行前端开发工作流程。使用大量的Grunt插件可以自动执行任务,例如编译S...
    昵称不能太随便阅读 64评论 0 1
  • Grunt是一个任务管理器,能大大提高您运行前端开发工作流程。使用大量的Grunt插件可以自动执行任务,例如编译S...
    寒梁沐月阅读 168评论 0 2
  • 2016.4.2 雷艳妮0214 原文 孟武伯问孝,子曰:“父母唯其疾之忧。” 感受:孔子的这段话也是在谈孝的问...
    艳妮阅读 44评论 0 0