目录:
 

1. 用途和场景
  • jshint代码检查
  • 代码合并
  • 代码压缩--js/css/html都可以
  • SASS/LESS编译css
  • watch监听---文件发生改变自动执行任务
 
以上这些都是可以用grunt来执行的自动化任务。
grunt本身是一种自动化任务处理工具,它是一个工具框架,有很多插件扩展它的功能。
上述的各个功能都有其相对应的grunt插件。
 

2.Grunt插件
Grunt官方给出了60个左右的插件--------日常基本够用
 
另外,来自民间的grunt插件(上传到npm且标记了gruntplugin关键词的)就有上千个------功能十分健全,甚至还有sprites。
 

3.相关资源
官方github:
 
官方网址(文档):
 
中文文档:
 
插件列表:
 

4.环境安装
1.首先,grunt依赖Nodejs和npm环境
2.使用npm安装grunt-cli命令行工具
全局安装命令:

npm install -g grunt-cli

5.开始学习
 
5.1 一个新项目
假设你手上有一个项目,叫gruntlearn,项目文件中你的源码存储在src目录下:
src下,是所有的源码。包含四个模块的js文件,还没编译的scss文件,html文件,图片文件。
 
现在你想用grunt,自动给你的源代码执行几个任务:
  • 将images/html和复制到 发布文件夹build下
  • 用jshint检查js语法
  • 合并四个js文件(分别合并,因为a,b用于不同的页面)
  • 编译scss文件
  • 压缩合并后的js文件,存储到build下
  • 调试:新建一个本地服务器监听文件改变自动刷新HTML文件
 
5.2 生成package.json
首先,要在命令行里打开到gruntlearn的目录下,输入指令npm.init
然后跟着引导,对项目进行相关设置:
最后会根据你的设置,在项目根目录下生成一个package.json的文件
 
这个文件是nodejs用来描述一个项目的文件。这时候你还没有在你的项目中使用grunt以及相关插件。
 
5.3 在项目中安装grunt和相关插件
根据第1步中的需求,需要用到一下插件:
 
安装grunt命令:
 
后面的参数意思是【把刚刚安装的东西添加到package.json中】。
出现+grunt@版本号,说明安装成功了。
在安装完以后,你就可以看见在package.json中多了:
并且在项目根目录下增加了node_modules文件夹,这里面存放的就是当前项目安装的node模块。
 
一次性安装插件:
命令:
npm install --save-dev grunt-contrib-copy grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect
 
5.4 Gruntfile语法
Gruntfile文件:
Gruntfile.js 或 Gruntfile.coffee 文件是有效的 JavaScript 或 CoffeeScript 文件,应当放在你的项目根目录中,和package.json文件在同一目录层级,并和项目源码一起加入源码管理器。
Gruntfile结构:
  • "wrapper" 函数
    • 项目与任务配置
    • 加载grunt插件和任务
    • 自定义任务
 
具体的代码结构:
 
5.4.1 配置任务
例如官方文档中的如下代码:
grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),
  uglify: {
    options: {
      banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
    },
    build: {
      src: 'src/<%= pkg.name %>.js',
      dest: 'build/<%= pkg.name %>.min.js'
    }
  }
});

其中先写了一句 pkg: grunt.file.readJSON('package.json') 功能是读取 package.json 文件,并把里面的信息获取出来,方便在后面任务中应用(例如下面就用了 <%= pkg.name %> 来输出项目名称),这样可以提高灵活性。

之后的uglify对象就是自定义的任务,uglify对象里面具体配置,需要根据不同插件的文档来定义。
 
5.4.2 加载插件
很easy:
grunt.loadNpmTasks('grunt-contrib-uglify');
5.4.3 注册任务
 
在default上注册任务:
grunt.registerTask('default', ['uglify']);

(default是默认的task,当你在命令行执行grunt的时候,会执行注册在default上的任务)

 
自定义注册任务:
grunt.registerTask('compress', ['uglify:build']);

如果想要执行这个 task,我们需要在命令行输入 grunt compress 命令来执行这条 task,而这条 task 的任务是 uglify 下面的 build 任务,也就是说,我们只会执行 uglify 里面 build 定义的任务,而不会执行 uglify 里面定义的其他任务。

 
需要注意:
task 的命名不能与后面的任务配置同名,也就是说这里的 compress 不能命名成 uglify,这样会报错或者产生意外情况
 
5.5 为我们的项目配置gruntfile.js
下面是我参考插件文档写的代码:

//wrapper函数
module.exports = function(grunt) {

    //你可以像普通的js文件一样添加自己的代码
    var sassStyle = 'expanded';

    //1.配置任务 tasks--根据插件的文档来定义任务
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        //将html和图片从src复制到build
        copy: { //task
            html: { //target
                files: [
                    { expand: true, cwd: './src/html', src: '*', dest: './build/html/' }
                ]
            },
            images: { //target
                files: [
                    { expand: true, cwd: './src/images', src: '*', dest: './build/images/' }
                ]
            }
        },
        //合并js
        concat: {
            /* options: {
                separator: ';',//合并分隔符
            }, */
            dist: {
                files: { //文件路径
                    './src/js/a.all.js': ['./src/js/a.1.js', './src/js/a.2.js'],
                    './src/js/b.all.js': ['./src/js/b.1.js', './src/js/b.2.js']
                }
            },
        },
        //task:编译sass
        sass: {
            output: { //target
                options: { //target options
                    style: sassStyle
                },
                files: {
                    './build/css/style.css': './src/scss/style.scss' //'目标文件':'源文件'
                }
            }
        },
        //代码检查
        jshint: {
            all: ['./src/js/a.all.js', './src/js/b.all.js']
        },
        //压缩
        uglify: {
            uglifyjs: {
                files: {
                    './build/js/a.min.js': ['./src/js/a.all.js'],
                    './build/js/b.min.js': ['./src/js/b.all.js']
                }
            }
        },
        //监听
        watch: {
            scripts: {
                files: ['./src/js/a.1.js', './src/js/a.2.js', './src/js/b.1.js', '/src/js/b.2.js'],
                tasks: ['concat', 'jshint', 'uglify']
            },
            sass: {
                files: ['./src/scss/style.scss'],
                tasks: ['sass']
            },
            livereload: {
                options: {
                    liverelload: '<%= connect.options.livereload %>'
                },
                files: [
                    './src/html/index.html',
                    './src/scss/style.scss',
                    './src/js/a.1.js',
                    './src/js/a.2.js',
                    './src/js/b.1.js',
                    './src/js/b.2.js'
                ]
            }
        },
        connect: {
            options: {
                port: 9000,
                open: true,
                livareload: 35729,
                //change this to '0.0.0.0' to access the server from outside
                hostname: 'localhost'
            },
            server: {
                options: {
                    port: 9001,
                    base: './'
                }
            }
        }
    });

    //2.加载插件
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-connect');

    //3.注册任务
    grunt.registerTask('copyhtml', ['copy:html']); //可以用task:target的方法分别注册
    grunt.registerTask('concatjs', ['concat']); //也可以只用task名称注册,默认执行task下全部target
    grunt.registerTask('outputcss', ['sass']);
    grunt.registerTask('watchit', ['concat', 'sass', 'jshint', 'uglify', 'connect', 'watch']);
    grunt.registerTask('default', ['copy', 'concat', 'sass', 'jshint', 'uglify']);
}

  

 
 
5.6 执行任务
注意:
由于npm install sass安装的sass是dart写的,而grunt-contrib-sass插件需要的是ruby的版本,
所以执行sass任务时,如果安装的是npm sass,会导致编译后的css文件为空,
此时需要用 gem install sass 命令提前安装Ruby版本的sass。
 
将上面的代码复制到你的gruntfile.js文件里,就可以在命令行执行几个呗注册的任务。
例如执行:grunt 或 grunt default
 
执行后的代码目录:
成功啦~~~撒花
 
另外:
执行watchit命令后,即可自动构建本地服务器,自动打开浏览器,监听改变自动刷新。
 
 

6.后续学习
  • 上述例子仅供学习,有些配置还值得推敲,具体的插件配置文档还有很多细节可以学习。
 

【grunt】两小时入门的更多相关文章

  1. mongodb 两小时入门

    传统的计算机应用大多使用关系型数据库来存储数据,比如大家可能熟悉的MySql, Sqlite等等,它的特点是数据以表格(table)的形式储存起来的.数据库由一张张排列整齐的表格构成,就好像一个Exc ...

  2. 两小时入门Docker

    引入 Docker是什么? Docker 最初是 dotCloud 公司创始人 Solomon Hykes 在法国期间发起的一个公司内部项目,于 2013 年 3 月以 Apache 2.0 授权协议 ...

  3. 《Qt Quick 4小时入门》学习笔记

    http://edu.csdn.net/course/detail/1042/14804?auto_start=1   Qt Quick 4小时入门 第五章:Qt Quick里的信号与槽   QML中 ...

  4. 一小时入门 Python

    因为需求, 需要用到py, 所以来学学py, 因为有java基础 一小时入门py语法是不成问题的, 但是仅仅入门基础语法而已, 不涉及算法,不涉及大数据,机器学习,人工智能, 但是py这么火爆,就在于 ...

  5. 每天自学两小时Python,整理了最详细的学习路线和规

    上次这篇文章每天自学两小时Python,三个月学通月入20K主要是给大家整理了学习资料视频和PDF书籍,很多需要的都关注私信领取了. 很多朋友领取之后都问我教程有了那么应该从哪去开始学习呢,私信太多我 ...

  6. 《Qt Quick 4小时入门》学习笔记4

    http://edu.csdn.net/course/detail/1042/14806?auto_start=1 Qt Quick 4小时入门 第七章:处理鼠标与键盘事件 1.处理鼠标事件 鼠标信号 ...

  7. 《Qt Quick 4小时入门》学习笔记3

    http://edu.csdn.net/course/detail/1042/14807?auto_start=1 Qt Quick 4小时入门 第八章:Qt Quick中的锚(anchors)布局 ...

  8. 《Qt Quick 4小时入门》学习笔记2

    http://edu.csdn.net/course/detail/1042/14805?auto_start=1   Qt Quick 4小时入门 第五章:Qt Quick基本界面元素介绍   1. ...

  9. Uber选拔专车司机:五年以上驾驶经验 两小时视频培训

    摘要:说起当时下流行打车软件Uber的司机,还得从春节前在上海一次打车说起.那几天,记者在上海某商场逛到打烊时间,大包小包拎着袋子根本腾不出手拦出租车,而商场门口的出租车临时停靠点更是挤满“血拼”而归 ...

随机推荐

  1. 一小时学会ECMAScript6新特性

    ECMAScript 简介 简称es,是一套标准,javascript就是使用这套标准的语言.主流的浏览器使用的是ECAMScript5,ECAMScript6(ECAMScript2015)是一涛新 ...

  2. [补档][NOIP2015] 斗地主

    [NOIP2015] 斗地主 题目 传送门:http://cogs.pro/cogs/problem/problem.php?pid=2106 INPUT 第一行包含用空格隔开的2个正整数Tn,表示手 ...

  3. GPUImage原理

    GPUImage是一个开元的基于GPU的图片或视频的处理框架,其本身内置了多达120多种常见的滤镜效果,并且支持照相机和摄像机的实时滤镜,并且能够自定义图像滤镜. 美颜的基本概念 OpenGL ES: ...

  4. HTML5——JSON的方法实现对象copy

    JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.它基于 ECMAScript (w3c制定的js规范)的一个子集,采用完全独立于编程语言 ...

  5. css超简单实现div页面居中【适合做弹出框】

    1.前言 现在项目中用到弹出框的话大部分都是直接用控件的.不过有控件虽方便,但有时候会有冲突的地方.我上次用layui的弹出框控件,然后也用到了百度的编辑器uEditor,然后一切都好好的,结果编辑赋 ...

  6. python编程基础知识—字典

    字典 在python中,字典是一系列键-值对,每个键都与一个值相关联,可使用键来访问相关联的值.与键相关联的值可以是数字.字符串.列表乃至字典,即可将任何python对象用在字典中的值. 在pytho ...

  7. 自适应Simpson积分

    自适应Simpson积分 作用 如标题所示,这玩意就是当你不会微积分的时候来求积分的. 总所周知,积分的定义就是函数的某一段与坐标轴之间的面积. 那么,自适应Simpson积分就是一种可以再某些精度下 ...

  8. EXT.NET复杂布局(二)——报表

    前面提到过工作台(<EXT.NET复杂布局(一)--工作台>)了,不知道各位看过之后有什么感想.这次就介绍介绍使用EXT.NET画几个报表. 看图写作从小学就开始了,如图: 图一 图二 图 ...

  9. ==和equals()的区别

    简单的一句话说明就是: == 比较Stack中的值(引用数据类型stack中存放的是对象的堆内存地址). equals() 通常被覆写为比较对象的值 那么==和equals()之间到底有什么具体的区别 ...

  10. 在配置wem.xml后,Tomcat遇到问题,启动失败的解决方法

    前两天在写程序时,碰到了Tomcat无法启动的问题,就是在配置完web.xml后.想必好多小伙伴都有遇到吧. 如图: 出现这个错误的原因是:在配置web.xml的时候出现了错误! 如图所示,没有修改这 ...