grunt学习笔记四:grunt实例demo

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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以为您解答这个问题。 首先,我需要解释一下什么是 GruntGrunt 是一个 JavaScript 任务运行器,用于自动化前端开发工作流程。它可以帮助我们完成许多重复且繁琐的任务,例如压缩 JavaScript 和 CSS、编译 LESS、Sass 等,以及自动化测试等。 接下来,我将为您提供一个 Grunt 搭建项目实例grunt.initConfig 配置详解: 1. 安装 Grunt 在开始之前,您需要安装 Grunt。您可以通过 npm 安装它,命令如下: ``` npm install -g grunt-cli ``` 2. 创建项目文件夹 ``` mkdir myproject cd myproject ``` 3. 初始化项目 ``` npm init ``` 4. 安装 GruntGrunt 插件 在项目文件夹中运行以下命令: ``` npm install grunt --save-dev npm install grunt-contrib-jshint --save-dev npm install grunt-contrib-uglify --save-dev ``` 以上命令会安装 Grunt 和两个 Grunt 插件:jshint 和 uglify。 5. 创建 Gruntfile.js 文件 在项目文件夹中创建一个名为 Gruntfile.js 的文件,并添加以下内容: ``` module.exports = function(grunt) { // 项目配置 grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), jshint: { files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'], options: { globals: { jQuery: true } } }, uglify: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } }); // 加载插件 grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-uglify'); // 默认任务 grunt.registerTask('default', ['jshint', 'uglify']); }; ``` 上述代码中,我们首先定义了一个 initConfig 对象,它包含了两个任务:jshint 和 uglify。其中,jshint 任务用于检查 JavaScript 代码的语法错误,uglify 任务用于压缩 JavaScript 代码。 接下来,我们通过 grunt.loadNpmTasks() 方法加载了两个 Grunt 插件。最后,我们通过 grunt.registerTask() 方法注册了一个默认任务,它会依次执行 jshint 和 uglify 任务。 6. 运行 Grunt 在项目文件夹中运行以下命令: ``` grunt ``` 以上命令会自动执行 Gruntfile.js 中定义的默认任务。 这就是使用 Grunt 搭建项目实例grunt.initConfig 配置详解的全部内容。如果您有任何疑问,请随时问我。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值