grunt安装配置在webstrom中使用

Posted 2020-06-16

1.全局范围安装 Grunt命令行（CLI）

npm install -g grunt-cli

Grunt CLI的任务很简单：调用与Gruntfile在同一目录中 Grunt。这样带来的好处是，允许在同一个系统上同时安装多个版本的 Grunt。

2.安装grunt相关模块

在package.json文件中添加所需grunt模块，例如：

"grunt": "^0.4.5",
"grunt-contrib-concat": "^0.5.1",
"grunt-contrib-cssmin": "^0.12.3",
"grunt-contrib-jshint": "^0.11.2",
"grunt-contrib-uglify": "^0.9.1",
"grunt-contrib-watch": "^0.6.1"

安装这些模块

npm install

执行完这个命令，这些插件会自动安装在node_modules目录下。

若package.json文件不存在，可以自动生成，命令：

npm init

3.配置脚本文件gruntfile.js

模块安装完成之后，在项目根目录下，新建脚本文件Gruntfile.js作为grunt的配置文件

module.exports = function(grunt) {

    // 配置Grunt各种模块的参数
    grunt.initConfig({
        pkg: grunt.file.readJSON(‘package.json‘),
        concat: {
            options: {
                separator: ‘;‘
            },
            dist: {
                src: [‘scripts/home.js‘, ‘scripts/head.js‘, ‘scripts/foot.js‘],
                dest: ‘dest/libs.js‘
            }
        },
        uglify: {
            build: {
                src: ‘dest/libs.js‘,
                dest: ‘dest/libs.min.js‘
            }
        }
    });

    grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
    grunt.loadNpmTasks(‘grunt-contrib-concat‘);
    // 默认任务
    grunt.registerTask(‘default‘, [‘concat‘, ‘uglify‘]);

};

以上做法是先合并形成一个libs，然后再将libs压缩成libs.min.js

4.执行grunt命令

grunt concat
grunt uglify

也可以直接执行default:

grunt default

也可以在WebStrom中，右击gruntfile.js文件名，选择Show Grunt Tasks,显示Grunt窗口。default右击选择 Run ‘default‘。