【grunt整合版】grunt使用

时间 2019-11-08

标签 grunt整合版 grunt 使用栏目 Node.js 繁體版

原文原文链接

（转自叶小钗的博客http://www.cnblogs.com/yexiaochai/p/3603389.html，花了很长时间测试，若是谁在使用过程当中遇到问题，欢迎加企鹅：1648739376，共同探讨~~）css

grunt

grunt是一套前端自动化工具，一个基于nodeJs的命令行工具，通常用于：html

　　① 压缩文件前端

　　② 合并文件node

　　③ 简单语法检查git

　　④编译等github

准备阶段

一、nodeJs环境

由于grunt是基于nodeJs的，因此首先各位须要安装nodeJS环境:
(转自叶小钗的博客)http://www.cnblogs.com/yexiaochai/p/3527418.html或者https://nodejs.org/express

二、安装grunt

有了nodeJs环境后，咱们即可以开始搞grunt了，由于咱们可能在任何目录下运行打包程序，因此咱们须要安装CLI
官方推荐在全局安装CLI（grunt的命令行接口）npm

npm install -g grunt-cli

这条命令将会把grunt命令植入系统路径，这样就能在任意目录运行他，缘由是json

每次运行grunt时，它都会使用node的require查找本地是否安装grunt，若是找到CLI便加载这个本地grunt库
而后应用咱们项目中的GruntFile配置，并执行任务
PS：这段先不要管，安装完了往下看ide

实例学习：打包zepto

一些东西说多了都是泪，直接先上实例吧，比较容易理解，实例结束后再说其它的
首先在D盘新建一个项目（文件夹就好）
在里面新增两个文件

① package.json

{
  "name": "demo",
  "file": "zepto",
  "version": "0.1.0",
  "description": "demo",
  "license": "MIT",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.6.3",
    "grunt-contrib-uglify": "~0.2.1",
    "grunt-contrib-requirejs": "~0.4.1",
    "grunt-contrib-copy": "~0.4.1",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-strip": "~0.2.1"
  },
  "dependencies": {
    "express": "3.x"
  }
}

②Gruntfile.js

完了咱们须要在grunt目录下执行 npm install将相关的文件下载下来：

$ cd d:
$ cd grunt

测试执行grunt可能会报错，应该是执行 npm install grunt

而后咱们的目录就会多一点东西：

这个时候在目录下新建src文件夹，放一个zepto.js进去

而后在Gruntfile中新增如下代码（先别管做用，增长再说）

module.exports = function (grunt) {

  // 项目配置
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%=pkg.file %>.js',
        dest: 'dest/<%= pkg.file %>.min.js'
      }
    }
  });
  // 加载提供"uglify"任务的插件
  grunt.loadNpmTasks('grunt-contrib-uglify');
  // 默认任务
  grunt.registerTask('default', ['uglify']);
}

而后运行 grunt命令后

grunt

测试时发现报错：，缘由是未下载grunt-contrib-uglify插件，

此时需执行：npm insatll grunt-contrib-uglify，而后再执行grunt

grunt插件：https://www.npmjs.com/search?q=grunt-contrib-uglify

查看目录，多了一个文件zepto.min.js，而且是压缩的！第一步结束~~~

认识Gruntdile与package.json

不出意外，每个gurnt都会须要这两个文件，而且极可能就只有这两个文件（复杂的状况有所不一样）

package.json

这个文件用来存储npm模块的依赖项（好比咱们的打包如果依赖requireJS的插件，这里就须要配置）
而后，咱们会在里面配置一些不同的信息，好比咱们上面的file，这些数据都会放到package中
对于package的灵活配置，咱们会在后面提到

Gruntfile

这个文件尤为关键，他通常干两件事情：
① 读取package信息
② 插件加载、注册任务，运行任务（grunt对外的接口所有写在这里面）

Gruntfile通常由四个部分组成
① 包装函数
这个包装函数没什么东西，意思就是咱们全部的代码必须放到这个函数里面

module.exports = function (grunt) {
//你的代码
}

这个不用知道为何，直接将代码放入便可

② 项目/任务配置
咱们在Gruntfile通常第一个用到的就是initConfig方法配置依赖信息

pkg: grunt.file.readJSON('package.json')

这里的 grunt.file.readJSON就会将咱们的配置文件读出，而且转换为json对象

而后咱们在后面的地方就能够采用pkg.XXX的方式访问其中的数据了
值得注意的是这里使用的是underscore模板引擎，因此你在这里能够写不少东西

uglify是一个插件的，咱们在package依赖项进行了配置，这个时候咱们为系统配置了一个任务
uglify（压缩），他会干这几个事情：

① 在src中找到zepto进行压缩（具体名字在package中找到）
② 找到dest目录，没有就新建，而后将压缩文件搞进去
③ 在上面加几个描述语言

这个任务配置其实就是一个方法接口调用，按照规范来就好，暂时不予关注，
这里只是定义了相关参数，可是并未加载实际函数，因此后面立刻就有一句：

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

用于加载相关插件，测试时貌似并未加载此插件，因此若是报错，就手动下载一下插件，考照前面安装插件方法

最后注册一个自定义任务（其实也是默认任务），因此咱们下面的命令行是等效的：

grunt == grunt uglify

至此，咱们就简单解析了一番grunt的整个操做，下面来合并文件的例子

合并文件

合并文件依赖于grunt-contrib-concat插件，因此咱们的package依赖项要新增一项

"devDependencies": {

  "grunt": "~0.4.1",
  "grunt-contrib-jshint": "~0.6.3",
  "grunt-contrib-concat": "~0.3.0",
  "grunt-contrib-uglify": "~0.2.1",
  "grunt-contrib-requirejs": "~0.4.1",
  "grunt-contrib-copy": "~0.4.1",
  "grunt-contrib-clean": "~0.5.0",
  "grunt-strip": "~0.2.1"
},

而后再将代码写成这个样子

module.exports = function (grunt) {
  // 项目配置
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
      options: {
        separator: ';'
      },
      dist: {
        src: ['src/zepto.js', 'src/underscore.js', 'src/backbone.js'],
        dest: 'dest/libs.js'
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-concat');
  // 默认任务
  grunt.registerTask('default', ['concat']);
}

三个文件被压缩成了一个，可是没有压缩，因此，咱们这里再加一步操做，将之压缩后再合并

module.exports = function (grunt) {

  // 项目配置
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
      options: {
        separator: ';'
      },
      dist: {
        src: ['src/zepto.js', 'src/underscore.js', 'src/backbone.js'],
        dest: 'dest/libs.js'
      }
    },
    uglify: {
      build: {
        src: 'dest/libs.js',
        dest: 'dest/libs.min.js'
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');
  // 默认任务
  grunt.registerTask('default', ['concat', 'uglify']);
}

我这里的作法是先合并造成一个libs，而后再将libs压缩成libs.min.js

因此咱们这里换个作法，先压缩再合并，其实unglify已经干了这些事情了

module.exports = function (grunt) {

  // 项目配置
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      "my_target": {
        "files": {
          'dest/libs.min.js': ['src/zepto.js', 'src/underscore.js', 'src/backbone.js']
        }
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-uglify');
  // 默认任务
  grunt.registerTask('default', ['uglify']);
}

grunt-contrib-stylus

Stylus彷佛并非颇有名，以致于不少人不知道它是作什么的，但提到SASS相信有很多人据说过甚至使用过很长时间。其实不管是LESS、SASS仍是Stylus这些预处理工具，都是对CSS的一种延伸和强化。出现这些工具的缘由很简单，CSS自己只是一种描述性质的东西，甚至它不能算是语言而是样式表，因此咱们须要一个有条件语句和变量甚至是函数的东西去动态生成CSS代码来达到提升效率和加强可维护性的目的。关于stylus的详细介绍和使用能够参考如下网站：

　　http://learnboost.github.io/stylus/

　　http://www.tychio.net//tech/2013/11/16/stylus-guide.html

如前面介绍，咱们已经安装了node.js，复制Gruntfile.js和package.json至build目录下：

而后在package.json中将代码改成以下：

{

"name": "my-project",
"version": "0.1.0",
"devDependencies": {
　　"grunt": "*",
　　"grunt-contrib-jshint": "*",
　　"grunt-contrib-csslint": "*",
　　"grunt-contrib-watch": "*"
}
}

而后再build目录下执行：

npm install grunt

npm install grunt-contrib-stylus

npm install grunt-contrib-csslint
npm install grunt-contrib-watch

插件安装完成后以下图，若是没有安装成功或者下载失败，请从新安装，不然会报错~

将Gruntfile.js中的代码改成以下：(缩进未调整好，测试时自行调整好代码缩进)

module.exports = function (grunt) {
'use strict';
grunt.initConfig({
watch: {
styl: {
files: ['style/*.styl'],
tasks: ['css']
}
},
stylus: {
aff_new: {
options: {
urlfunc: 'embedurl',
import: [
'tool.styl'
],
banner: '\/\* elaine \*\/\n\/\* ' + (new Date()).toLocaleString() + ' \*\/\n'
},
files: {
'css/style1.css': [
'style/login.styl',
'style/frame.styl',
'style/offer.styl'
],
'css/style2.css':
['style/base.styl'],
'national_flag-master/country.css':
['style/country.styl']
},
}
},
csslint: {
strict: {
options: {
csslintrc: '.csslintrc',
import: 2
},
src: [
'../affiliate/static/css/*.styl.css'
]
}
}
});

/* grunt.loadNpmTasks('grunt-karma');
grunt.loadNpmTasks('grunt-fragment'); */
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-stylus');
grunt.loadNpmTasks('grunt-contrib-csslint');

/* grunt.registerTask('test', ['karma']);
grunt.registerTask('sync', ['fragment']);*/
grunt.registerTask('css', ['stylus']);
grunt.registerTask('default', ['css', 'watch']);
};

在目录下增长style文件夹，并放置sty文件：

执行grunt,生成css，以下图所示：

备注：更改任意sty文件，css会自动从新生成，完成~~

后续用到的会继续补充~