webstorm 安装 grunt

1.先安装nodehttp://www.nodejs.org/

2.安装Grunt客户端cmd中输入npminstall-ggrunt-cli

注意：此只是Grunt客户端，非Grunt

3.在WebStorm下新建项目，然后新建以下两个文件

GruntFile.js

module.exports = function (grunt) {
    // 项目配置
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            my_target: {
                files: [{
                    expand: true,
                    cwd: 'src/js',
                    src: '**/*.js',
                    dest: 'dest/js'
                }]
            }
        },
        concat : {
            css : {
                src: ['src/asset/*.css'],
                dest:'dest/asset/all.css'
            }
        },
        cssmin: {
            css: {
                src:'dest/asset/all.css',
                dest:'dest/asset/all-min.css'
            }
        }
    });
    // 加载提供"uglify"任务的插件
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-css');
    // 默认任务
    grunt.registerTask('default', ['uglify','concat','cssmin']);
}

package.json

{
  "name": "grunt-test",
  "version": "1.0.0",
  "dependencies": {},
  "devDependencies": {
    "cssmin": "^0.4.3",
    "grunt": "^1.0.1",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-uglify": "^1.0.1",
    "grunt-css": "^0.5.4"
  }
}

然后在项目窗口下面，webstorm命令行输入：npminstallgrunt--save-dev

安装grunt这里等待时间有点长

然后依次

npminstallgrunt-contrib-uglify--save-dev

npminstallgrunt-contrib-concat--save-dev

npminstallgrunt-css--save-dev

安装插件

如果还出现错误的信息重启下webstorm或者点击控制台刷新按钮！