grunt学习

有些时候,项目中的静态资源,比如图片占用的文件有点大,影响加载的速度,所以会选择grunt对其进行压缩打包。对于grunt其他的用法,还在继续学习中,先记录下关于grunt的一些学习。

grunt是一套基于Node.js的命令行工具,所以先确保环境中已安装好了Node环境。

接着安装grunt,如下:

1、安装CLI

CLI是grunt命令行,先将其安装到全局环境中。点击开始->运行->cmd,执行以下命令进行安装:

npm install -g grunt-cli

安装一次即可,以后就可以在任何项目的子目录下运行grunt,执行grunt命令。

2、配置package.json和Gruntfile文件

这两份文件需要添加在项目里的,且要在同一个目录下。如tool文件所示。

以压缩css文件下的style.css、images文件、js文件下的flex.js为例:

① package.json

用于存储项目的元数据,在此文件中列出项目依赖的grunt和Grunt插件,即Gruntfile.js中定义的任务,放置于devDependencies配置段内。

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-autoprefixer": "^3.0.4",
    "grunt-contrib-cssmin": "^1.0.1",
    "grunt-contrib-imagemin": "^1.0.0",
    "grunt-contrib-uglify": "^0.11.1"
  }
}

② Gruntfile文件

Gruntfile.js或者Gruntfile.coffee,用来配置或定义任务(task)并加载Grunt插件的。

(1)‘‘wrapper‘‘函数

module.exports = function (grunt) {
    // ...
}

(2)项目/任务配置

用initConfig方法将存储在package.json文件中的JSON元数据读取引入到grunt config中。

grunt.initConfig({
        // 从package.json读取配置信息
        pkg: grunt.file.readJSON(‘package.json‘),
        ......
})

为系统配置任务,如imagemin图片压缩,主要是找到要压缩的图片路径src,设置压缩后的存放路径dest。

imagemin: {
            /* 压缩图片大小 */
            dist: {
                options: {
                    optimizationLevel: 3 //定义 PNG 图片优化水平
                },
                files: [
                       {
                        expand: true,
                        cwd: ‘../images/‘,
                        src: [‘**/*.{png,jpg,jpeg}‘], // 优化 img 目录下所有 png/jpg/jpeg 图片
                        dest: ‘../static/images‘ // 优化后的图片保存位置,覆盖旧图片,并且不作提示
                       }
                    ]
                }
        }

(3)加载imagemin插件

grunt.loadNpmTasks(‘grunt-contrib-imagemin‘);

(4)执行imagemin任务

grunt.registerTask(‘images‘, [‘imagemin‘]);

完整配置代码如下:

module.exports = function (grunt) {
    ‘use strict‘;
    grunt.initConfig({
        // 从package.json读取配置信息
        pkg: grunt.file.readJSON(‘package.json‘),
        imagemin: {
            /* 压缩图片大小 */
            dist: {
                options: {
                    optimizationLevel: 3 //定义 PNG 图片优化水平
                },
                files: [
                       {
                        expand: true,
                        cwd: ‘../images/‘,
                        src: [‘**/*.{png,jpg,jpeg}‘], // 优化 img 目录下所有 png/jpg/jpeg 图片
                        dest: ‘../static/images‘ // 优化后的图片保存位置,覆盖旧图片,并且不作提示
                       }
                    ]
                }
        },
        uglify: {
          options: {
            sourceMap: false,
             banner: ‘/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n‘//压缩文件头部注释
          },
          dist: {
            files: [{
               expand:true,
                cwd:‘../js/‘,//js目录下
                src:‘**/flex.js‘,//js下的flex.js文件,若是所以js文件,则为**/*.js
                dest: ‘../static/js‘//压缩后的文件输出到此目录下
            }
            ]
          }

        },
       autoprefixer: {
        options: {
          // Task-specific options go here.
        },
        dist: {
              files: [{
                expand:true,
                src:[‘../css/style.css‘],//css文件下的style.css
                dest: ‘../static/css/‘//输出到此目录下
            }]
          }
        },
       cssmin: {
            dist: {
              files: [
              {
                expand:true,
                cwd:‘../css/‘,//css目录下
                src:[‘**/style.css‘],//所有css文件
                dest: ‘../static/css‘//输出到此目录下
            }
            ]
          }
      }
    });
    // 加载包含类似"imagemin"任务名的插件
    grunt.loadNpmTasks(‘grunt-contrib-imagemin‘);
    grunt.loadNpmTasks(‘grunt-contrib-cssmin‘);
    grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
    grunt.loadNpmTasks(‘grunt-autoprefixer‘);

    // 默认被执行的任务列表
    grunt.registerTask(‘default‘, [‘uglify‘,‘autoprefixer‘,‘cssmin‘,‘imagemin‘]);
    grunt.registerTask(‘autopre‘, [‘autoprefixer‘]);
    grunt.registerTask(‘css‘, [‘autoprefixer‘,‘cssmin‘]);
    grunt.registerTask(‘images‘, [‘imagemin‘]);
    grunt.registerTask(‘js‘, [‘uglify‘]);
};

3、执行命令

配置好package.json和Gruntfile.js后,在包含该文件的目录下,先执行npm install命令安装项目依赖的库,会生成tool文件下的node_modules文件。

npm install

其次,执行grunt命令

grunt

4、压缩完成,生成static文件夹存放压缩后的文件,如下

grunt中文网:http://www.gruntjs.net/

时间: 2024-10-22 20:37:29

grunt学习的相关文章

Grunt学习使用

原文地址:Grunt学习使用必看 grunt简介神马的不多说,到处一大堆. 我只说说我已经实现了的代码. 按照官方的教程 相信已经配置好了,接下来说 package.json 和 Gruntfile.js这2个文件,package.json是为了告诉grunt我们用哪些插件,这些插件的版本是多少,以及我这个项目的一些信息. 那有人说我怎么知道我需要什么插件,我怎么写这个文件?请看官方的例子: 1 { 2 "name": "my-project-name", 3 &q

Grunt学习日记

Grunt和 Grunt 插件是通过npm安装并管理的, npm是Node.js的包管理器. 第一步:先安装node.js环境 第二步:安装Grunt-CLI 在node.js命令工具中输入npm install -g grunt-cli 敲击回车即可安装. -g为在全局安装. 第三步:在本地建一个文件夹,dos命令进入该文件夹下,输入npm init 配置package.json. 第四步:配置好了包的json文件,这一步开始安装Grunt,输入命令 npm install grunt --s

grunt学习笔记(适用初学者)

1.在学习grunt之前,首先要对nodejs有一些简单的理解.安装nodejs的步骤很简单,根据官网的提示安装即可,在此文中将不再累述. http://www.nodejs.org/ 2. Grunt介绍 Grunt是一个自动化的项目构建工具. 如果你需要重复的执行像压缩, 编译, 单元测试, 代码检查以及打包发布的任务. 那么你可以使用Grunt来处理这些任务, 你所需要做的只是配置好Grunt, 这样能很大程度的简化你的工作. 如果在团队中使用Grunt, 你只需要与其他人员约定好使用Gr

grunt学习笔记1 理论知识

你需要检查js语法错误,然后再去压缩js代码.如果这两步你都去手动操作,会耗费很多成本.Grunt就能让你省去这些手动操作的成本. “—save-dev”的意思是,在当前目录安装grunt的同时,顺便把grunt保存为这个目录的开发依赖项.看到“开发依赖项”这一次,是不是觉得有些眼熟?上文在配置package.json时,其中的“devDependencies”中就会存储开发依赖项. 下面就是一些常有grunt开发依赖插件 Contrib-jshint——javascript语法错误检查:Con

grunt学习随笔

1 grunt 安装  全局安装 npm install -g grunt-cli 2 配置好package.json 和 Gruntfile 文件,这两个文件必须位于项目根目录下. package.json配置实例 1 { 2 "name": "web", 3 "version": "2.1.0", 4 "description": "A simple ui framework based on

grunt学习二

1. 新建文件和文件目录 mkdir grunt-in-action cd grunt-in-action cd grunt-in-action mkdir grunt-empty cd grunt-empty vim index.html mkdir js cd js vim index.js cd .. 2. npm和grunt初始化 npm init npm install grunt --save-dev npm install //如果想要node_module,就 加载 3. 安装t

Grunt学习一:使用grunt创建jquery plugin.

? 下载安装github客户端. http://windows.github.com 打开github客户端. 登录后,点击左上角的加号,可以创建一个Repository. (也可以点击Clone,将github上面的项目克隆到本地.) 创建完成后,点击右上角的 Publish Repository, 就可以将这个Repository发布到github上面. 如果没有安装node.js,就安装node.js. 用npm在全局安装grunt. 安装grunt-init. ? 打开git shell

grunt学习2

grunt的任务配置都是在Gruntfile.js文件中的grunt.initConfig中配置的. grunt.initConfig({ concat: { // 这里是concat任务的配置信息. }, uglify: { // 这里是uglify任务的配置信息 }, // 任意数据. my_property: 'whatever', my_src_files: ['foo/*.js', 'bar/*.js'], }); 每个任务中可以配置多个目标 grunt concat:foo或者gru

grunt学习三-bower(二)

一.通过bower help 来展开bower的命令 Usage: bower <command> [<args>] [<options>] Commands: cache Manage bower cache help Display help information about Bower home Opens a package homepage into your favorite browser info Info of a particular packag