grunt学习笔记四:grunt实例demo

来源:互联网 发布:mwc飞控源码解读 编辑:程序博客网 时间:2024/05/17 07:03
1.新建项目demo
2.在demo根目录下,创建package.json文件
eg:  
  {  
    "name":"demo",  
    "version":"1.0.0",  
    "devDependencies": {  
        "grunt-contrib-uglify":"~0.2.0"  
    }  
   }
2.运行npm install 生成node_modules目录,该目录包含grunt插件
3.demo根目录下,新建src目录
4.src目录中 新建测试文件hello-grunt.js
(function)($){
var str = "<p>hello grunt</p>";
$('body').append(str);
})(jQuery)
5.在demo根目录下,新建 build 目录,存放处理后的文件
6.编写 Gruntfile.js 文件
module.exports = function(grunt) {  
   
    // 构建任务配置  
    grunt.initConfig({  
        //读取package.json的内容,形成个json数据  
        pkg: grunt.file.readJSON('package.json'),  
        uglify: {  
            //文件头部输出信息  
            options: {  
                banner:'/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'  
            },  
            //具体任务配置  
            build: {  
                //源文件  
                src:'src/hello-grunt.js',  
                //目标文件  
                dest:'build/hello-grunt-min.js'  
            }  
        }  
    });  
   
    // 加载指定插件任务  
    grunt.loadNpmTasks('grunt-contrib-uglify');  
   
    // 默认执行的任务  
    grunt.registerTask('default', ['uglify']);  
};  
7.grunt 运行
0 0