webstorm 安装 grunt

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  或者点击控制台刷新按钮!

猜你喜欢

转载自alyouge.iteye.com/blog/2335919
今日推荐