grunt基础思路+运行于中型项目实战

最新推荐文章于 2022-10-08 16:30:42 发布

Hello 程序猿

最新推荐文章于 2022-10-08 16:30:42 发布

阅读量854

点赞数 1

分类专栏： Grunt 文章标签：胡博君 grunt grunt在项目中实战 grunt如何配合项目使用

本文链接：https://blog.csdn.net/laokdidiao/article/details/51118597

版权

Grunt 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、Grunt运行步骤

第一步：搭建环境，主要是nodejs, npm, grunt(grunt-cli)

$ mkdir installGrunt
$ cd installGrunt
$ npm install grunt --save-dev #如果看到如下信息表示grunt安装成功
$ grunt --version
grunt-cli v0.1.13
grunt v0.4.5

第二步：创建 package.json

# 在项目的根目录下创建package.json文件
（1）根据grunt-init模板自动创建一个特定的package.json文件；（需要先安装 npm install -g grunt-init）
（2）在命令终端通过npm init命令自动创建一个基本的package.json文件；（亲自测试过）
（3）从官网上复制或者下载一个package.json文件；（对新手最方便）
（4）手工创建一个package.json文件；（对高手最方便）

添加依赖
（1）逐个添加，逐个执行命令 $ npm install XXX --save-dev
XXX是常用插件名，如grunt-contrib-jshint
最好是全称，不要简写。我曾试过 npm install cssmin --save-dev 生成了无用的东西。

（2）也可以一次在package.json中添加多个插件，然后一次执行命令 $ npm install
安装声明的依赖关系grunt插件同时，在项目根目录下添加一个node_modules目录，目录中放置对应grunt插件所需的插件目录名。
注：当你给npm install添加 --save-dev标志是，一个波浪线范围将被用于你的package.json中。（建议）

第三步：创建Gruntfile.js

# 添加自己合适的gruntfile配置，运行，得出预期输出
module.exports=function(grunt){
    //任务配置
    grunt.initConfig({
    });
    //载入任务
    grunt.loadNpmTasks();
    //注册任务
    grunt.registerTask();
}
内容参见demo1

$ grunt     #

运行成功，在目标目录下创建了一个压缩后的js，引用压缩后的js，效果一样。

总结：上面是一个简单的运行步骤，具体一些内容请看官网 http://www.gruntjs.net/ ，如果对于Gruntfile.js里面需要用到一些依赖库不会使用的可以去npm官网参看 https://www.npmjs.com/，如果对于Grunt使用存在很多问题，可以去Grunt推荐的社区找寻答案 http://www.stackoverflow.com/。