grunt学习笔记(1)

字数 1278阅读 37

grunt

简介:
Grunt是一种自动化任务处理工具,它就是一个工具框架,有很多插件扩展它的功能。。


Grunt 基于 Node.js ,用 JS 开发,这样就可以借助 Node.js 实现跨系统跨平台的桌面端的操作,例如文件操作等等。此外,Grunt 以及它的插件们,都作为一个 包 ,可以用 NPM 安装进行管理。

所以 NPM 生成的 package.json 项目文件,里面可以记录当前项目中用到的 Grunt 插件,而 Grunt 会调用 Gruntfile.js 这个文件,解析里面的任务(task)并执行相应操作。

安装 Grunt

Grunt 依赖 Node.js 所以在安装之前确保你安装了 Node.js。然后开始安装 Grunt。

实际上,安装的并不是 Grunt,而是 Grunt-cli,也就是命令行的 Grunt,这样你就可以使用 grunt 命令来执行某个项目中的 Gruntfile.js 中定义的 task 。但是要注意,Grunt-cli 只是一个命令行工具,用来执行,而不是 Grunt 这个工具本身。

安装 Grunt-cli 需要使用 NPM,使用下面一行即可在全局范围安装 Grunt-cli ,换句话说,就是你可以在任何地方执行 grunt 命令:

npm install -g grunt-cli

cli:利用node提供的requrie()系统查找本地安装的grunt,如果到grunt,cli就会加载并传递gruntfile中的配置信息,然后执行任务

生成 package.json 文件

进入项目的目录

npm init

{
  "name": "0717",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

安装 grunt

进入项目的目录

npm install grunt --save-dev

“—save-dev”的意思是,在当前目录安装grunt的同时,顺便把grunt保存为这个目录的开发依赖项

此时看package.json文件:

{
  "name": "1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^1.0.1"
  }
}

所需要的插件

Grunt 帮忙实现下面几个功能:检查每个 JS 文件语法、合并两个 JS 文件、将合并后的 JS 文件压缩、将 SCSS 文件编译、新建一个本地服务器监听文件变动自动刷新 HTML 文件。需要用到:

  • 合并文件:grunt-contrib-concat
  • 语法检查:grunt-contrib-jshint
  • Scss 编译:grunt-contrib-sass
  • 压缩文件:grunt-contrib-uglify
  • 监听文件变动:grunt-contrib-watch
  • 建立本地服务器:grunt-contrib-connect

它们的命名和文档都很规范,因为这些是官方提供的比较常用的插件。这些插件同时都是 NPM 管理的包,比如 grunt-contrib-concat - npm 你也可以在这上面看到用法等。

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

加上了 –save-dev 参数,表示会把刚安装的东西添加到 package.json 文件中。

配置 Gruntfile.js 的语法

需要在项目根目录下新建一个叫Gruntfile.js的文件。这是一个 JS 文件,你可以写任意的 JS 代码,比如声明一个 对象 来存储一会要写任务的参数,或者是一个变量当作开关等等。

然后,所有的代码要包裹在:

//包装函数
module.exports = function(grunt) {
    //任务配置,所有插件的配置信息
    grunt.initConfig({
        //获取package.json的信息
        pkg: grunt.file.readJSON('package.json'),
    });
    //加载所用到的插件
    grunt.loadNpmTasks('grunt-contrib-uglify');

    //告诉grunt当我们在终端输入grunt时需要做什么,有先后顺序
    grunt.registerTask('default', ['uglify', 'concat','watch']);
}

  • Contrib-jshint——javascript语法错误检查;
  • Contrib-watch——实时监控文件变化、调用相应的任务重新执行;
  • Contrib-clean——清空文件、文件夹;
  • Contrib-uglify——压缩javascript代码
  • Contrib-copy——复制文件、文件夹
  • Contrib-concat——合并多个文件的代码到一个文件中
  • karma——前端自动化测试工具

使用uglify插件(压缩javascript代码)

安装:

npm install grunt-contrib-uglify --save-dev

Gruntfile.js

module.exports = function(grunt) {
    //任务配置,所有插件的配置信息
    grunt.initConfig({
        //获取package.json的信息
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            options: {
                banner: '/*! create by <%= grunt.template.today("yyyy-mm-dd") %>*/\n'
            },
            build: {
                files: [{
                    src: 'js/index.js',
                    dest: 'build/index.min.js'
                }, {
                    src: 'js/index2.js',
                    dest: 'build/index2.min.js'
                }],
            }
        },
    });
    grunt.loadNpmTasks('grunt-contrib-uglify');

    //告诉grunt当我们在终端输入grunt时需要做什么,有先后顺序
    grunt.registerTask('default', ['uglify']);
}

这里对uglify的配置有两项。
“options”中规定允许生成的压缩文件带banner,即在生成的压缩文件第一行加一句话说明。注意,其中使用到了pkg获取package.json的内容。

“build”中配置了源文件和目标文件。即规定了要压缩谁?压缩之后会生成谁?

(PS:上文中说过的package.json的内容终于找到了他被应用的地方了。这样的好处是:例如,对文件版本的管理,你只需要在package.json中修改即可,grunt会自动根据最新的版本号生成相应版本的文件。你不用手动去修改文件的文件名。)

运行:

grunt

会发现,在build文件夹下已经多了index.min.js和index2.min.js两个文件。

Javascript使用uglify压缩,css可使用cssmin插件压缩。安装、配置方法一样的。

使用jshint插件(检查javascript语法错误)

安装:

npm install grunt-contrib-jshint --save-dev
module.exports = function(grunt) {
    //任务配置,所有插件的配置信息
    grunt.initConfig({
        //获取package.json的信息
        pkg: grunt.file.readJSON('package.json'),
         jshint: {
            options: {
                jshintrc: '.jshintrc'
            },
            build: ['Gruntfile.js','js/index.js','js/index2.js']
        },
    });
    grunt.loadNpmTasks('grunt-contrib-jshint');

    //告诉grunt当我们在终端输入grunt时需要做什么,有先后顺序
    grunt.registerTask('default', ['jshint']);
}

和uglify的配置一样,分为“options”和“build”两个部分。“build”中描述了jshint要检查哪些js文档的语法。 “options”中描述了要通过怎么的规则检查语法,这些规则的描述文件就保存在网站根目录下的一个叫做“.jshintrc”的文件中。

{
    "browser":true,//暴露浏览器属性的全局变量,列如 window,document;注意:这个选项不暴露变量 alert或 console。
    "boss":true,//禁止比较表达式的值没有达到预期警告。
    "curly": true,//循环或者条件语句必须使用花括号包围。这个选项需要你总是把花括号在块循环和条件。
    "devel":true //这个选项定义了全局变量,通常用于日志调试: console, alert等等
}

使用watch插件(真正实现自动化)

安装:

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

Gruntfile.js

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            options: {
                banner: '/*! create by <%= grunt.template.today("yyyy-mm-dd") %>*/\n'
            },
            build: {
                files: [{
                    src: 'js/index.js',
                    dest: 'build/index.min.js'
                }, {
                    src: 'js/index2.js',
                    dest: 'build/index2.min.js'
                }],
            }
        },
        jshint: {
            options: {
                jshintrc: '.jshintrc'
            },
            build: ['Gruntfile.js','js/index.js','js/index2.js']
        },
        concat: {
            bar: {
                src: ['build/*.js'],
                dest: 'dest/all.min.js'
            },
        },
        watch: {
            files: ["js/*index.js"],
            tasks: ['uglify']
        }
    });
    grunt.loadNpmTasks('grunt-contrib-uglify')
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.registerTask('default', ['jshint','uglify', 'watch']);
};

推荐阅读更多精彩内容