前端构建工具grunt

课程目的

  • 熟悉grunt的使用

课程内容

什么是grunt?有什么作用?

基于Node.js创建,Grunt是一个基于任务的命令行工具,它能够同构减少减少预先需要准备的资源来加速工作流。它将工作包裹进入任务之中,任务会随着你的工作进程自动编译。

我们在开发前端应用后要做的事一般为: - 代码检查 - 单元测试 - 文件压缩 - js合并 - 图片压缩 - 发布到机器

这些流程也叫前端构建

每次手动做这些事比较繁琐,有没有自动化工具呢?

grunt就能自动做这些事。

http://www.gruntjs.net/

grunt安装

npm install -g grunt-cli

sudo npm install -g grunt-cli

grunt使用

这里我们让grunt自动做两件事: - css压缩css合并 - js压缩js合并

第一步:安装所需的包

有两种方法,一是手动安装,二是通过配置文件自动安装

手动安装: 在当前项目下创建package.json,deDependencies先暂时为空

{ "name": "my-app", "version": "0.1.0", "devDependencies": { } }

1.安装grunt,因为其他包都依赖它

npm install grunt --save-dev

2.安装grunt-contrib-cssmin ,这个包用于css压缩合并

npm install grunt-contrib-cssmin --save-dev

3.安装grunt-contrib-uglify ,这个包用于js的压缩合并

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

自动安装 在当前项目文件夹下创建package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-uglify": "~0.3",
    "grunt-contrib-cssmin": "~0.12"
  }
}

注:关于版本号格式,参考https://docs.npmjs.com/misc/semver#Ranges, ~0.4.1表示 0.4.1<=ver<0.5.0, ~0.3表示 0.3。0<=ver<0.4.0

执行npm install,所需的依赖会自动安装。

包安装完成后会发现当前文件夹下多出node_modules文件夹,里面就是刚才安装的包。

第二步骤:配置包

在当前项目文件夹下创建Gruntfile.js

学会参考包的readme文件,里面有包的使用方法

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      build: {
        files: [{
              expand: true,
              cwd: 'src/js',
              src: '**/*.js',
              dest: 'dist/js',
              ext: '.min.js'
        }]
      }
    },
    cssmin: {
      min: {
        files: [{
          expand: true,
          cwd: 'src/css',
          src: ['*.css','**/*.css', '!*.min.css'],
          dest: 'dist/css',
          ext: '.min.css'
        }]
      },
      union: {
        files: {
          'dist/css/output.css': 'src/css/*.css'
        }
      }
    }
  });

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');

  // Default task(s).
  grunt.registerTask('default', ['uglify']);

};

第四步:执行

grunt // 执行default里的命令
grunt uglify  //执行unglify命令
grunt cssmin:target  //执行cssmin命令,使用target参数