grunt之Gruntfile(1)

grunt 执行的时候,他会找该目录下的Gruntfile文件,所以,要在目录下创建Gruntfile文件。

下面我demo一个copy任务:

执行copy,首先我们要一个copy的模块,那么我们先安装下copy模块

首先,我到H盘,命令行输入 cd h:  因为我的H盘东西比较少,你们自己随便到一个目录,

然后输入 mkdir testGrunt 新建一个testGrunt目录,然后 cd testGrunt进入testGrunt目录

然后执行 npm init 初始化模块,控制台中会让你输入名称

 

这里的名称我们默认,就叫testGrunt,

然后会依次让你输入版本,描述,main:主入口文件,这里我们没有回车直接过,作者,版权,keywords,生成的文件大概如图:

我们选择yes,它会在我的testGrunt目录下生成一个package.json文件,

打开这个文件,他的内容就是上面控制台中的内容。

我们为什么要生成package.json文件呢,package.json的文件说明了,grunt包的依赖项,当我们执行 npm install 后门不加参数的时候,他默认会去该目录下查找是否存在package.json文件,如果找到了,则,安装里面的devDependencies 里的依赖包

好,下面我们安装grunt-contrib-copy 命令,并且把该包加到devDependencies 里,在控制台输入 npm install grunt-contrib-copy --save-dev 

其中 --save-dev 是参数 其意就是把该包添加到 devDependencies 中如图:

然后我们查看下package.json文件

然后我们在安装load-task包,安装方法一致,我就不再赘述了,直接上命令了 npm install load-grunt-task --save-dev,

我们为了能够看到执行了多久,在安装了timegrunt ,命令:npm install time-grunt --save-dev

至此,我们的包安装完成,下一节,讲Gruntfile文件

转载于:https://www.cnblogs.com/zhongping/p/4523964.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我会为您详细解答。 首先,Grunt是一个基于任务的命令行构建工具,可以自动化执行一些常规的开发任务,例如压缩文件、拷贝文件、合并文件等。接下来我会为您介绍如何使用Grunt搭建项目实例,并详细说明grunt.initConfig的配置。 1. 安装Grunt 首先,您需要在本地安装Node.js和Npm。然后,在命令行中执行以下命令安装Grunt: ``` npm install -g grunt-cli ``` 2. 创建项目 接下来,您需要在本地创建一个项目文件夹,并在其中创建一个package.json文件,用于存储项目的依赖项。在命令行中执行以下命令: ``` mkdir myproject cd myproject npm init ``` 在执行npm init命令时,您需要回答一些问题,例如项目名称、版本号、作者等。 3. 安装Grunt插件 Grunt的功能是通过插件实现的,因此您需要安装一些Grunt的插件。例如,如果您需要压缩文件,您需要安装grunt-contrib-uglify插件。在命令行中执行以下命令: ``` npm install grunt grunt-contrib-uglify --save-dev ``` 4. 配置Grunt 接下来,您需要创建一个Gruntfile.js文件,并在其中配置GruntGruntfile.js是一个JavaScript文件,其中包含了Grunt的所有配置信息。以下是一个简单的例子: ```javascript module.exports = function(grunt) { // 配置Grunt grunt.initConfig({ // 配置插件 uglify: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, build: { src: 'src/*.js', dest: 'build/script.min.js' } } }); // 加载插件 grunt.loadNpmTasks('grunt-contrib-uglify'); // 定义任务 grunt.registerTask('default', ['uglify']); }; ``` 在这个例子中,我们定义了一个uglify任务,用于压缩js文件。我们首先需要通过grunt.initConfig()方法来配置插件,然后通过grunt.loadNpmTasks()方法来加载插件,最后通过grunt.registerTask()方法来定义任务。 5. 运行Grunt 最后,在命令行中执行以下命令来运行Grunt: ``` grunt ``` 这会执行默认的任务(在这个例子中就是uglify任务)。 希望这个解答能够帮助您理解Grunt的基本使用方法。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值