码迷,mamicode.com
首页 > Web开发 > 详细

grunt安装、配置、在webstrom中使用

时间:2016-02-25 11:47:33      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:

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‘。 

grunt安装、配置、在webstrom中使用

标签:

原文地址:http://www.cnblogs.com/wonglu/p/5216212.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!