关于grunt和gulp

Posted 2020-09-02 小艾想偷懒

grunt

是一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于：
① 压缩文件
② 合并文件
③ 简单语法检查

”自动化。对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。当你在 Gruntfile 文件正确配置好了任务，任务运行器就会自动帮你或你的小组完成大部分无聊的工作。”

Grunt 基于 Node.js ，用 JS 开发，这样就可以借助 Node.js 实现跨系统跨平台的桌面端的操作，例如文件操作等等。此外，Grunt 以及它的插件们，都作为一个 包 ，可以用 NPM 安装进行管理。所以 NPM 生成的 package.json 项目文件，里面可以记录当前项目中用到的 Grunt 插件，而 Grunt 会调用 Gruntfile.js 这个文件，解析里面的任务（task）并执行相应操作。

安装

有了nodeJs环境后（也就是得先安装nodejs），便可以开始搞grunt了，因为我们可能在任何目录下运行打包程序，所以我们需要安装CLI
官方推荐在全局安装CLI（grunt的命令行接口），在命令行输入：

npm install -g grunt-cli

（这条命令将会把grunt命令植入系统路径，这样就能在任意目录运行他，原因是每次运行grunt时，它都会使用node的require查找本地是否安装grunt，如果找到CLI便加载这个本地grunt库 然后应用我们项目中的GruntFile配置，并执行任务）

接下来：生成 package.json 文件

可以去网上找找（复制粘贴）这个 package.json 文件其实是 Node.js 来描述一个项目的文件，JSON 格式。生成这个文件超级简单，推荐用命令行交互式的生成一下：在项目文件下 npm init

也可以自己模仿写：

 

{   "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-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" }, "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"   }

}

安装 Grunt 和所需要的插件

.合并文件：grunt-contrib-concat

• 语法检查：grunt-contrib-jshint
• Scss 编译：grunt-contrib-sass
• 压缩文件：grunt-contrib-uglify
• 监听文件变动：grunt-contrib-watch
• 建立本地服务器：grunt-contrib-connect

在项目文件根目录上：

npm install grunt --save-dev
表示通过 npm 安装了 grunt 到当前项目，同时加上了 –save-dev 参数，表示会把刚安装的东西添加到 package.json 文件中。可打开 package.json 文件看下，是不是多了

"devDependencies": {
  "grunt": "^0.4.5"
}
命令行输入以下安装插件

npm install --save-dev grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect

配置 Gruntfile.js 的语法

这个文件尤其关键，他一般干两件事情：

① 读取package信息

② 插件加载、注册任务，运行任务（grunt对外的接口全部写在这里面）

Gruntfile一般由四个部分组成 ① 包装函数 这个包装函数没什么东西，意思就是我们所有的代码必须放到这个函数里面

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

接下来任务配置代码、插件加载代码、任务注册代码。

这三块代码，任务配置代码就是调用插件配置一下要执行的任务和实现的功能，插件加载代码就是把需要用到的插件加载进来，任务注册代码就是注册一个 task，里面包含刚在前面编写的任务配置代码。

 

grunt.initConfig({
  pkg: grunt.file.readJSON(\'package.json\'),
  uglify: {
    options: {
      banner: \'/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\\n\'
    },
    build: {
      src: \'src/<%= pkg.name %>.js\',
      dest: \'build/<%= pkg.name %>.min.js\'
    }
  }
});

插件加载代码（还有其他插件不做介绍如watch （http://www.cnblogs.com/haogj/p/4785288.html）

 grunt.loadNpmTasks(\'grunt-contrib-uglify\');（压缩）

  grunt.loadNpmTasks(\'grunt-contrib-concat\');（合并）

任务注册代码

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

也就是最后配置结果代码为
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 

参考：http://www.cnblogs.com/yexiaochai/p/3603389.html

http://gruntjs.com/getting-started

还是初学，等以后再深入了解grunt吧

gulp

gulp是基于Nodejs的自动任务运行器，它能自动化的完成js/coffee/less/html/image/css等文件的测试，检查，合并，压缩，格式化，浏览器自动刷新，部署文件生成，并监听文件在改动后重复指定这些步骤。在实现上，它借鉴来了Unix操作系统的管道（pipe）思想，前一级输出，直接变成后一级的输入，使得在操作上非常简单。gulp和grunt非常类似，但相比于grunt的频繁IO操作，gulo的操作就更快写了

现在开始安装：

npm install -g gulp（首先确保已经正确安装nodejs环境，然后以全局的方式安装gulp）

基于自己建的项目文件下 npm install --save-dev gulp(全局安装完后，自己要用到gulp的每一个项目都要单独安装一次，也就是所谓的局部安装)

【全局安装gulp是为了执行gulp任务，项目也安装gulp是为了调用gulp插件功能】

自动生成package.json:npm init(基于项目文件根目录)

安装依赖：npm install gulp-uglify --save-dev(即便本地系统里面没有，则命令运行后便装到了自己项目的依赖里 package.json中)其他插件类比即可

在自己的项目文件中建立gulpfile.js

var gulp=require（\'gulp\'）;//引入gulp

var uglify=require(\'gulp-uglify\');//

var concat=require(\'gulp-concat\');

var paths={

script:[\'js/index.js\',\'js/main/js\']//(项目文件js中的两个文件)

}

gulp.task(\'default\',function(){

gulp.src(paths)

.pipe(uglify())

.pipe(concat(\'all.min.js\'))

.pipe(gulp.dest(\'build\'));

});

最后：运行 gulp;

关于自动加载插件

npm install --save-dev gulp-load-plugins

流式开发的gulp 本人还有待学习