欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

webstorm 安装 grunt Grunt webstorm 

程序员文章站 2022-06-08 13:25:34
...
1. 先安装  node    http://www.nodejs.org/
2. 安装 Grunt 客户端  cmd 中 输入 npm install -g grunt-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 命令行输入:npm install grunt --save-dev
安装grunt 这里等待时间有点长
然后依次

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

npm install grunt-contrib-concat --save-dev

npm install grunt-css --save-dev

安装插件

如果还出现错误的信息重启下webstorm  或者点击控制台刷新按钮!
相关标签: Grunt webstorm