0329-Grunt

Grunt快速入门

grunt 和grunt插件是通过npm安装管理

安装CLI

grunt-cli不等于grunt

cli的任务是:调用与Gruntfile在同一目录中 Grunt。这样带来的好处是,允许你在同一个系统上同时安装多个版本的 Grunt。

这样就能让多个版本的 Grunt 同时安装在同一台机器上。



现有项目

假设有一份配置好package.json和Gruntfile文件的项目:

1.将命令行的当前目录转到项目的根目录下。

2.执行npm install命令安装项目依赖的库。

3.执行grunt命令。



新建项目

package.json: 此文件被npm用于存储项目的元数据,以便将此项目发布为npm模块。你可以在此文件中列出项目依赖的grunt和Grunt插件,放置devDependencies配置段内。

Gruntfile: 此文件被命名为Gruntfile.js或Gruntfile.coffee,用来配置或定义任务(task)并加载Grunt插件的。此文档中提到的Gruntfile其实说的是一个文件,文件名是Gruntfile.js或Gruntfile.coffee。


安装grunt和grunt插件


安装grunt


安装grunt插件

"wrapper" 函数

每一份Gruntfile(和grunt插件)都遵循同样的格式,你所书写的Grunt代码必须放在此函数内:

module.exports =function(grunt) {

         // Do grunt-related things in here

};


GruntFile

module.exports =function(grunt) {

        // Project configuration.

        grunt.initConfig({

          //插件任务的配置信息

         });

        // 加载包含 "uglify" 任务的插件。

        grunt.loadNpmTasks('grunt-contrib-uglify');

      // 默认被执行的任务列表。

        grunt.registerTask('default', ['uglify']);

};


自定义任务


Grunt配置

Grunt的task配置都是在Gruntfile中的grunt.initConfig方法中指定的。此配置主要是以任务名称命名的属性,也可以包含其他任意数据。一旦这些代表任意数据的属性与任务所需要的属性相冲突,就将被忽略。

由于这本身就是JavaScript,因此不仅限于使用JSON;甚至可以以编程的方式生成配置。



Options属性

该对象可选



文件

所有文件格式都支持scr(源文件)和dest(目标文件)属性

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 快速入门 Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器。 在安...
    angelwgh阅读 1,144评论 0 0
  • 快速入门 Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器。Gru...
  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    build1024阅读 542评论 0 0
  • 对网站资源进行优化,并使用不同浏览器测试并不是网站设计过程中最有意思的部分,但是这个过程中的很多重复的任务能够使用...
    懵逼js阅读 1,101评论 0 8
  • 2017年5月27 晴 休息了一天重新开启特种兵之旅,我有点疲惫不堪,因为白天公司临时状况不...
    FAB夏染阅读 219评论 0 0