首页 > 代码库 > Grunt使用心得

Grunt使用心得

2024-07-05 03:10:03   227人阅读

1.安装npm

2.安装CLI ( npm install -g grunt-cli)

3.安装grunt (npm install grunt --save-dev)

4.添加gruntfile.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
module.exports = function (grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON(‘package.json‘),
    concat: {
      options: {
        separator: ‘;‘
      },
      dist: {
        src: [‘src/**/*.js‘],
        dest: ‘dist/<%= pkg.name %>.js‘
      }
    },
    uglify: {
      options: {
        banner: ‘/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n‘
      },
      dist: {
        files: {
          ‘dist/<%= pkg.name %>.min.js‘: [‘<%= concat.dist.dest %>‘]
        }
      }
    },
    qunit: {
      files: [‘test/**/*.html‘]
    },
    jshint: {
      files: [‘gruntfile.js‘, ‘src/**/*.js‘, ‘test/**/*.js‘],
      options: {
        //这里是覆盖JSHint默认配置的选项
        globals: {
          jQuery: true,
          console: true,
          module: true,
          document: true
        }
      }
    },
    watch: {
      files: [‘<%= jshint.files %>‘],
      tasks: [‘jshint‘, ‘qunit‘]
    }
  });
 
  grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
  grunt.loadNpmTasks(‘grunt-contrib-jshint‘);
  //grunt.loadNpmTasks(‘grunt-contrib-qunit‘);
  grunt.loadNpmTasks(‘grunt-contrib-watch‘);
  grunt.loadNpmTasks(‘grunt-contrib-concat‘);
 
  grunt.registerTask(‘test‘, [‘jshint‘, ‘qunit‘]);
  grunt.registerTask(‘default‘, [‘jshint‘, ‘qunit‘, ‘concat‘, ‘uglify‘]);
};

5.添加package.json

?
1
2
3
4
5
6
7
8
9
10
{
    "name":"test",
    "version":"0.1.0",
    "devDependencies": {
        "grunt":"~0.4.1",
        "grunt-contrib-jshint":"~0.6.0",
        "grunt-contrib-nodeunit":"~0.2.0",
        "grunt-contrib-uglify":"~0.2.2"
    }
}

6.安装 package.json里面依赖的插件

逐个安装

 npm install grunt-contrib-htmlmin --save-dev

......

7.运行grunt 命令

 

 


联系
我们