首页 > 代码库 > Grunt-学习。

Grunt-学习。

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

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

  • 1.安装node

    node.js安装教程

  • 2.grunt命令行(CLI) 安装在全局环境下,所以命令是这么写滴!

    npm install -g grunt-cli

  • 3.新建一个项目,名字叫grunt_test:注意,千万不要叫grunt,后面运行grunt命令的时候会出错

    下面是我的项目目录

    技术分享
    QQ截图20161222155458.png
  • 4.生成package.json,也可以手动生成这样一个文件

    npm init

生成之后在里面填入以下内容

技术分享
package.json.png
  • 5.安装grunt

    npm install grunt --save-dev 注意查看package.json文件

技术分享
grunt安装成功.png


偶?自动把grunt的版本号加上啦。对啦,这就是--save-dev的作用

  • 6.安装grunt插件

js语法检查:grunt-contrib-jshint
安装命令:npm install grunt-contrib-jshint --save-dev 下同
css语法检查:grunt-contrib-csslint
合并文件:grunt-contrib-concat
js压缩文件:grunt-contrib-uglify
css压缩文件:grunt-contrib-cssmin
image压缩文件:grunt-contrib-imagemin
html压缩文件:grunt-contrib-htmlmin
Sass\Scss 编译:grunt-contrib-sass
安装sass插件后,我运行grunt,发现报错,提示ruby没有安装,所以如果需要使用到这个插件的,要确保自己的电脑上是否有装ruby,没有的话要进行安装
sudo yum install ruby # CentOS, Fedora, 或 RHEL 系统
sudo apt-get install ruby-full # Debian 或 Ubuntu 系统
brew install ruby #苹果系统
Less 编译:grunt-contrib-less
监听文件变动:grunt-contrib-watch
建立本地服务器:grunt-contrib-connect

上面这些插件都安装好后,注意看package.json文件中的内容

技术分享
grunt插件安装成功.png
  • 7.配置Gruntfile.js

这里是对每个需要的插件进行配置

技术分享
grunt.initConfig.png

插件太多了,挑其中一个(uglify,用于js压缩)进行详细说明

技术分享
grunt-contrib-uglify.png

grunt是任务机制,我在这里给定了combine、compress、fileCompress三个任务,执行grunt时会按顺序执行三个任务
>

uglify:{    
    options:{        
        sourceMap: false,        
        stripBanners: true,        
        //压缩后的文件注释信息        
        banner :‘/*! <%=pkg.name%>-<%=pkg.version%>.js <%= grunt.template.today("yyyy-mm-dd") %> */\n‘,        
        footer:‘\n/*!修改于<%= grunt.template.today("yyyy-mm-dd") %>  */‘    
    },    
    combine: {        
        files: {           
             ‘build/static/js/compress-<%= pkg.name %>-<%= pkg.version %>.min.js‘: [‘dev/static/js/*.common.js‘],            
            ‘build/static/js/compress.common.min.js‘: [‘dev/static/js/*/*.common.js‘]        
        }    
    },    
    compress:{        
        options:{            
            report:"min",
        },        
        files:[{                
                expand:true,                
                cwd:‘dev/static/js‘,                
                src:[‘*.js‘,‘!*.min.js‘,‘!*.common.js‘],                
                dest:‘build/static/js‘,                
                ext:‘.min.js‘           
        }]    
    },    
    fileCompress:{        
        options:{                 
        },        
        files:[{                
            expand:true,                
            cwd:‘dev/static/js‘,                
            src:[‘**/*.js‘,‘!**/*.min.js‘,‘!**/*.common.js‘],                
            dest:‘build/static/js/‘,                
            ext:‘.min.js‘            
        }]    
    }
},

uglify:combine 用来合并文件
uglify:compress用来压缩文件
uglify:fileCompress也是用来压缩文件
下面两个的区别在于 files中的src:*/.js用来匹配所有的js,注意,输出的时候会保留目录层次,如果是合并到一个文件中,就把dest写成

dest: ‘build/static/js/common.js‘,并且不写ext就可以

grunt配置总体图

技术分享
grunt配置一览图.png


最后一行代码是注册任务,当然,除了default,我们也可以注册到别的Task上去,比如grunt.registerTask(‘compress‘, [‘uglify:build‘]);
如果想要执行这个 task,我们就不能只输入 grunt 命令了,我们需要输入 grunt compress命令来执行这条 task,而这条 task 的任务是 uglify 下面的 build 任务,也就是说,我们只会执行 uglify 里面 build 定义的任务,而不会执行 uglify 里面定义的其他任务。
这里需要注意的是,task 的命名不能与后面的任务配置同名,也就是说这里的 compress 不能命名成 uglify,这样会报错或者产生意外情况

  • 8.运行查看效果

    在grunt_test目录下,运行grunt,我现在是默认执行uncss和htmlmin
技术分享

Grunt-学习。