Grunt学习笔记

教程:于江水的Grunt 新手一日入门

Grunt是基于Nodejs的工具,有大量插件来帮助前端工程师做一些重复性的工作,比如:使用jshint检查代码,合并多个js、css文件,压缩js、css文件,编译sass文件,预览项目。

安装必要组件

  1. 下载并安装NodeJS
  2. 安装Grunt,打开Windows命令提示符cmd,使用命令npm install -g grunt-cli-g参数意思是安装到全局,而不是当前目录。
  3. Windows平台安装Ruby,需要使用rubyinstaller
  4. 安装Ruby的包管理工具Gem,需要手动下载这个页面的ZIP文件。解压到任意目录,比如D:\rubygems-2.6.8。在Windows命令提示符中进入该目录,运行命令ruby setup.rb
  5. 安装sass,gem install sass

开始

创建一个项目

创建一个目录,比如说d:\myproj,进入目录运行npm init来创建一个NodeJs项目,并生成该项目的配置文件。
也可以直接创建一个package.json文件。把以下内容贴进去:

{
  "name": "my-project-name",//项目名
  "version": "0.1.0",//项目版本
  "devDependencies": {//开发过程中需要的模块
    "grunt": "~0.4.5",//表示需要版本号为0.4.5的grunt,以及版本号到0.9.9的新版本。
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-uglify": "~0.5.0"
  }
}

再创建几个目录,来存放不同的文件,可以根据自己需求更改:

  • src:原始的js文件
  • scss: sass文件
  • js: jsHint检查、合并、压缩后的js文件
  • css: 编译,压缩后的css文件

安装Grunt插件

此处需要以下五个插件:

  • 合并文件:grunt-contrib-concat
  • js检查:grunt-contrib-jshint
  • Sass编译: grunt-contrib-sass
  • 压缩文件: grunt-contrib-uglify
  • 监视文件更改:grunt-contrib-watch
  • 建立本地服务器:grunt-contrib-connect

这些插件都是npm包,使用npm命令即可安装npm -g --save-dev grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect

--save-dev参数是说将这些包的信息保存到package.json的devDepandencies开发依赖包中。Grunt只在开发过程中使用,开发完成后就不需要了,所以放在devDepandencies。
--save,如果是jQuery、Bootstrap、AngularJS这类前端框架,开发完成后也要使用,就要用这个参数。

配置Grunt

新建一个Gruntfile.js文件,先填上

module.exports = function(grunt) {

  // 项目相关配置
  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',
        js: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  // 二. 载入uglify插件
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // 三. 默认任务
  grunt.registerTask('default', ['uglify']);

};

这个配置文件做了这些事:

  1. 从package.json读取项目配置;
  2. 使用了uglify插件。给插件配置了一个生成顶部信息的参数,并让插件从src目录查找js文件,压缩后放到js目录;
  3. 载入了uglify插件;
  4. 注册一个任务,任务名叫default,任务内容是使用上面定义的uglify插件。在命令行中直接运行grunt,就相当于运行grunt default

接下来还有三步:

配置任务

添加新评论