简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO)
首頁 > web前端 > js教程 > 主體

什麼是Grunt？對他的詳細介紹

零下一度
發布： 2017-06-26 11:29:06
原創
1884 人瀏覽過

前面的話

　　前端技術的發展真的很快，15年還在流行grunt，而現在隨著gulp的大量使用，以及webpack越來越流行，grunt基本上要被淘汰了。學習進度跟不上科技發展進度，實在是說不出的感覺。本文將介紹可能將過時的grunt

安裝

　　Grunt和Grunt外掛程式是透過npm安裝並管理的。在學習Grunt之前，需要先將Grunt命令列（CLI）安裝到全域環境中。安裝時可能需要使用sudo（針對OSX、*nix、BSD等系統中）權限或作為管理員（對於Windows環境）來執行以下命令

npm install -g grunt-cli
登入後複製

　　上述指令執行完後，grunt#就就被加入到系統路徑中了，以後就可以在任何目錄下執行此指令了

　　[注意]安裝grunt-cli並不等於安裝了Grunt。 Grunt CLI的任務很簡單：呼叫與Gruntfile在同一目錄中的Grunt。這樣帶來的好處是，允許在同一個系統上同時安裝多個版本的Grunt

　　每次執行grunt時，就利用node提供的require()系統尋找本機安裝的Grunt。正是由於此機制，可以在專案的任意子目錄中運行grunt。如果找到一份本地安裝的Grunt，CLI就將其加載，並傳遞Gruntfile中的配置信息，然後執行所指定的任務

 

配套

　　一般需要在專案中加入兩份檔案：package.json 和 Gruntfile

　　package.json: 此檔案被npm用於儲存專案的元數據，以便將此項目發佈為npm模組。可以在此檔案中列出專案所依賴的grunt和Grunt插件，放置於devDependencies設定段內

　　Gruntfile: 此檔案被命名為 Gruntfile.js 或Gruntfile.coffee，用來設定或定義任務（task）並載入Grunt外掛程式

【package.json】

　　#package.json應當放置於專案的根目錄中，與Gruntfile在同一目錄中，並且應該與專案的原始程式碼一起提交。在上述目錄(package.json所在目錄)中執行npm install將依據package.json檔案中所列出的每個依賴來自動安裝適當版本的依賴

　　常用的package.json配置如下

{  "name": "my-project-name",  "version": "0.1.0",  "devDependencies": {"grunt": "~0.4.5","grunt-contrib-jshint": "~0.10.0","grunt-contrib-nodeunit": "~0.4.1","grunt-contrib-uglify": "~0.5.0"
  }
}
登入後複製

　　向已經存在的package.json 檔案中新增Grunt和grunt外掛的最簡單方式是透過npm install --save-dev指令。此指令不光安裝了，也會自動將其加入devDependencies 設定段中，如下所示

npm install grunt-contrib-jshint --save-dev
登入後複製

#【Gruntfile】

　　Gruntfile.js 或 Gruntfile.coffee 檔案是有效的JavaScript 或CoffeeScript 文件，應放在專案根目錄中，和package.json檔案在同一目錄層級，並與專案原始碼一起加入原始碼管理器

　　Gruntfile由以下幾個部分構成：

  • "wrapper" 函數

  • 專案與任務配置

  • 載入grunt外掛程式與任務

  • 自訂任務

#　　在下面列出的這個 Gruntfile 中，package.json檔案中的專案元資料（metadata）被導入到Grunt 配置中， gr​​unt-contrib-uglify 插件中的uglify 任務（task）被配置為壓縮（minify）原始碼檔案並依據上述元資料動態產生一個檔案頭註釋。當在命令列中執行 grunt 指令時，uglify 任務會被預設執行

module.exports = function(grunt) {  // Project configuration.  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'  }
    }
  });  // 加载包含 "uglify" 任务的插件。
  grunt.loadNpmTasks('grunt-contrib-uglify');  // 默认被执行的任务列表。
  grunt.registerTask('default', ['uglify']);

};
登入後複製

　　1、wrapper函數

#　　每一份 Gruntfile （和grunt外掛程式）都遵循同樣的格式，所寫的Grunt程式碼必須放在wrapper函數內

module.exports = function(grunt) {  // Do grunt-related things in here};
登入後複製

　　2、專案和任務配置

　　大部分的Grunt任務都依賴某些配置數據，這些數據被定義在一個object內，並傳遞給grunt.initConfig 方法

#　　Grunt Gruntfile 中的grunt.initConfig方法中指定的。此配置主要是以任務名稱命名的屬性，也可以包含其他任意資料。一旦這些代表任意資料的屬性與任務所需的屬性相衝突，就將被忽略

grunt.initConfig({
  concat: {// 这里是concat任务的配置信息。  },
  uglify: {// 这里是uglify任务的配置信息  },  // 任意数据。
  my_property: 'whatever',
  my_src_files: ['foo/*.js', 'bar/*.js'],
});
登入後複製

　　在一个任务配置中，options属性可以用来指定覆盖内置属性的默认值。此外，每一个目标（target）中还可以拥有一个专门针对此目标（target）的options属性。目标（target）级的平options将会覆盖任务级的options。options对象是可选的，如果不需要，可以忽略

grunt.initConfig({
  concat: {
    options: {      // 这里是任务级的Options，覆盖默认值     },
    foo: {
      options: {// "foo" target options may go here, overriding task-level options.      },
    },
    bar: {      // No options specified; this target will use task-level options.    },
  },
});
登入後複製

　　在下面的案例中，grunt.file.readJSON('package.json') 将存储在package.json文件中的JSON元数据引入到grunt config中。 由于<% %>模板字符串可以引用任意的配置属性，因此可以通过这种方式来指定诸如文件路径和文件列表类型的配置数据，从而减少一些重复的工作

　　与大多数task一样，grunt-contrib-uglify插件中的uglify 任务要求它的配置被指定在一个同名属性中。在这里有一个例子, 我们指定了一个banner选项(用于在文件顶部生成一个注释)，紧接着是一个单一的名为build的uglify目标，用于将一个js文件压缩为一个目标文件

// Project configuration.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'}
  }
});
登入後複製

　　3、加载grunt插件和任务

　　像 concatenation、[minification]、grunt-contrib-uglify 和 linting这些常用的任务（task）都已经以grunt插件的形式被开发出来了。只要在 package.json 文件中被列为dependency（依赖）的包，并通过npm install安装之后，都可以在Gruntfile中以简单命令的形式使用：

// 加载能够提供"uglify"任务的插件。grunt.loadNpmTasks('grunt-contrib-uglify');
登入後複製

　　[注意] grunt --help 命令将列出所有可用的任务

　　4、自定义任务

　　通过定义 default 任务，可以让Grunt默认执行一个或多个任务。在下面的这个案例中，执行 grunt 命令时如果不指定一个任务的话，将会执行uglify任务。这和执行grunt uglify 或者 grunt default的效果一样。default任务列表数组中可以指定任意数目的任务（可以带参数）

// Default task(s).grunt.registerTask('default', ['uglify']);
登入後複製

 

合并

　　本节将介绍合并插件grunt-contrib-concat的实例应用

　　1、首先，建立项目结构。 根目录为'project'，存在一个'src'的文件夹，该文件夹下又包含'css'和'js'这两个文件夹。其中，'css'文件夹有一个空的'concat'文件夹，一个'style1.css'文件，以及一个'style2.css'文件；类似地，'js'文件夹有一个空的'concat'文件夹，一个'script1.js'文件，以及一个'script2.js'文件

　　由于需要用到grunt来实现合并，所以需要在项目根目录下，新建'package.json'和'Gruntfile.js'文件

　　最终的目录结构如下所示

　　2、填充文件内容

　　合并的目的是把'style1.css'和'style2.css'的内容合并到'css/src/concat'文件夹下，把'script1.js'和'script2.js'的内容合并到'js/src/concat'文件夹下

　　style1.css的文件内容如下

body{margin: 0;}
登入後複製

　　style2.css的文件内容如下

ul{margin: 0;padding: 0;list-style:none;
}
登入後複製

　　script1.js的文件内容如下

console.log('a');
登入後複製

　　script2.js的文件内容如下

console.log('b');
登入後複製

　　3、设置Grunt的package.json及Gruntfile.js文件

　　由于需要用到grunt及grunt-contrib-concat插件，所以package.json的文件内容如下

{  "name": "project",  "version": "1.0.0",  "devDependencies": {"grunt": "^1.0.1","grunt-contrib-concat": "^1.0.1"
  }
}
登入後複製

　　Gruntfile.js的配置文件如下

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
      options: {stripBanners: true,
        banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +'<%= grunt.template.today("yyyy-mm-dd") %> */'  },
      myCSSDist: {
        src: ['src/css/*.css'],
        dest: 'src/css/concat/<%= pkg.name %>-<%= pkg.version %>.css'  },
      myJSDist: {
        src: ['src/js/*.js'],
        dest: 'src/js/concat/<%= pkg.name %>-<%= pkg.version %>.js'  },      
    },
  });
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.registerTask('default', ['concat']);
};
登入後複製

　　4、效果演示

　　通过在命令行中使用npm install命令来安装插件

npm install
登入後複製

　　然后执行命令grunt

　　在'css/concat'文件夹下生成一个'project-1.0.0.css'的文件，内容如下

body{margin: 000-
登入後複製

　　在'js/concat'文件夹下生成一个'project-1.0.0.js'的文件，内容如下

/*! project - v1.0.0 - 2017-05-27 */console.log('a');console.log('b');
登入後複製

 

压缩

　　接下来，我们对合并后的project-1.0.0.css和project-1.0.0.js文件进行压缩，压缩名称加一个'.min'前缀，并分别保存到'project'目录下的'dist'目录下'css'文件夹和'js'文件夹

　　由于需要用到grunt-contrib-cssmin和grunt-contrib-uglify插件，所以package.json的文件内容如下

{  "name": "project",  "version": "1.0.0",  "devDependencies": {"grunt": "^1.0.1","grunt-contrib-concat": "^1.0.1","grunt-contrib-cssmin": "^2.2.0","grunt-contrib-uglify": "^3.0.1"
  }
}
登入後複製

　　Gruntfile.js的配置文件如下

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
      options: {
        stripBanners: true,
        banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +'<%= grunt.template.today("yyyy-mm-dd") %> */'  },
      myCSSDist: {
        src: ['src/css/*.css'],
        dest: 'src/css/concat/<%= pkg.name %>-<%= pkg.version %>.css'  },
      myJSDist: {
        src: ['src/js/*.js'],
        dest: 'src/js/concat/<%= pkg.name %>-<%= pkg.version %>.js'  },      
    },
    cssmin:{
      options: {
        stripBanners: true,
        banner: '/* <%= grunt.template.today("yyyy-mm-dd") %> */'        
      },
      build:{
        src: 'src/css/concat/<%= pkg.name %>-<%= pkg.version %>.css',
        dest: 'dist/css/<%= pkg.name %>-<%= pkg.version %>.min.css'        
      }

    },
    uglify:{
      options: {
        stripBanners: true,
        banner: '/* <%= grunt.template.today("yyyy-mm-dd") %> */'        
      },
      build:{
        src: 'src/js/concat/<%= pkg.name %>-<%= pkg.version %>.js',
        dest: 'dist/js/<%= pkg.name %>-<%= pkg.version %>.min.js'        
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.registerTask('default', ['concat','cssmin','uglify']);
};
登入後複製

　　通过在命令行中使用npm install命令来安装插件

　　然后执行命令grunt

　　在'dist/css/'文件夹下生成一个'project-1.0.0.min.css'的文件，内容如下

/*! project - v1.0.0 - 2017-05-27 */body{margin:0}ul{margin:0;padding:0;list-style:none}
登入後複製

　　在'dist/js/'文件夹下生成一个'project-1.0.0.min.js'的文件，内容如下

/* 2017-05-27 */console.log("a"),console.log("b");
登入後複製

 

检查

　　前面的博文已经介绍过jshint和csslint。如果要使用grunt中的插件，则需要在根目录下建立 .csslintrc 和 .jshintrc 文件，并设置它们的内容如下

//.csslintrc{"adjoining-classes":false,"box-sizing":false,"box-model":false,"compatible-vendor-prefixes": false,"floats":false,"font-sizes":false,"grandients":false,"important":false,"known-properties":false,"outline-none":false,"qualified-headings":false,"regex-selectors":false,"shorthand":false,"text-indent":false,"unique-headings":false,"universal-selector":false,"unqualified-attributes":false}//.jshintrc{"boss": false,"curly": true,"eqeqeq": true,"eqnull": true,"expr": true,"immed":true,"newcap":true,"noempty":true,"noarg":true,"undef":true,"regexp":true,"browser":false,"devel":true,"node":true}
登入後複製

　　由于需要用到grunt-contrib-csslint和grunt-contrib-jshint插件，所以package.json的文件内容如下

{  "name": "project",  "version": "1.0.0",  "devDependencies": {"grunt": "^1.0.1","grunt-contrib-concat": "^1.0.1","grunt-contrib-cssmin": "^2.2.0","grunt-contrib-uglify": "^3.0.1","grunt-contrib-csslint": "^2.0.0","grunt-contrib-jshint": "^1.1.0"    
  }
}
登入後複製

　　Gruntfile.js的配置文件如下

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
      options: {
        stripBanners: true,
        banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +'<%= grunt.template.today("yyyy-mm-dd") %> */'  },
      myCSSDist: {
        src: ['src/css/*.css'],
        dest: 'src/css/concat/<%= pkg.name %>-<%= pkg.version %>.css'  },
      myJSDist: {
        src: ['src/js/*.js'],
        dest: 'src/js/concat/<%= pkg.name %>-<%= pkg.version %>.js'  },      
    },
    cssmin:{
      options: {
        stripBanners: true,
        banner: '/* <%= grunt.template.today("yyyy-mm-dd") %> */'        
      },
      build:{
        src: 'src/css/concat/<%= pkg.name %>-<%= pkg.version %>.css',
        dest: 'dist/css/<%= pkg.name %>-<%= pkg.version %>.min.css'        
      }

    },
    uglify:{
      options: {
        stripBanners: true,
        banner: '/* <%= grunt.template.today("yyyy-mm-dd") %> */'        
      },
      build:{
        src: 'src/js/concat/<%= pkg.name %>-<%= pkg.version %>.js',
        dest: 'dist/js/<%= pkg.name %>-<%= pkg.version %>.min.js'        
      }
    },
    jshint:{
      options:{
        jshintrc:'.jshintrc'  },
      build:['Gruntfile.js','src/js/*.js']
    },
    csslint:{
      options:{
        csslintrc:'.csslintrc'  },
      build:['src/css/*.css']      
    }
  });
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-csslint');
  grunt.registerTask('default', ['jshint','csslint','concat','cssmin','uglify']);
};
登入後複製

　　通过在命令行中使用npm install命令来安装插件

　　然后执行命令grunt 

　　可以看到'script1.js'文件中第1行缺少分号，修改后再执行命令grunt

 

监控

　　grunt构建工具的自动化主要体现在grunt-contrib-watch插件上，该插件主要用于监听并执行对应的任务

　　package.json的文件内容如下

{  "name": "project",  "version": "1.0.0",  "devDependencies": {"grunt": "^1.0.1","grunt-contrib-concat": "^1.0.1","grunt-contrib-csslint": "^2.0.0","grunt-contrib-cssmin": "^2.2.0","grunt-contrib-jshint": "^1.1.0","grunt-contrib-uglify": "^3.0.1","grunt-contrib-watch": "^1.0.0"
  }
}
登入後複製

　　Gruntfile.js的配置文件如下

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
      options: {
        stripBanners: true,
        banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +'<%= grunt.template.today("yyyy-mm-dd") %> */'  },
      myCSSDist: {
        src: ['src/css/*.css'],
        dest: 'src/css/concat/<%= pkg.name %>-<%= pkg.version %>.css'  },
      myJSDist: {
        src: ['src/js/*.js'],
        dest: 'src/js/concat/<%= pkg.name %>-<%= pkg.version %>.js'  },      
    },
    cssmin:{
      options: {
        stripBanners: true,
        banner: '/* <%= grunt.template.today("yyyy-mm-dd") %> */'        
      },
      build:{
        src: 'src/css/concat/<%= pkg.name %>-<%= pkg.version %>.css',
        dest: 'dist/css/<%= pkg.name %>-<%= pkg.version %>.min.css'        
      }

    },
    uglify:{
      options: {
        stripBanners: true,
        banner: '/* <%= grunt.template.today("yyyy-mm-dd") %> */'        
      },
      build:{
        src: 'src/js/concat/<%= pkg.name %>-<%= pkg.version %>.js',
        dest: 'dist/js/<%= pkg.name %>-<%= pkg.version %>.min.js'        
      }
    },
    jshint:{
      options:{
        jshintrc:'.jshintrc'  },
      build:['Gruntfile.js','src/js/*.js']
    },
    csslint:{
      options:{
        csslintrc:'.csslintrc'  },
      build:['src/css/*.css']      
    },
    watch:{
      build:{
        files: ['src/js/*.js','src/css/*.css'],
        tasks: ['jshint','csslint','concat','cssmin','uglify'],
        options:{spawn:false}
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-csslint');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.registerTask('default', ['jshint','csslint','concat','cssmin','uglify','watch']);
};
登入後複製

　　通过在命令行中使用npm install命令来安装插件

　　然后执行命令grunt

　　修改'scrpt1.js'文件内容后，命令行自动显示如下

 

变动更新

　　contrib-watch插件会监听需要处理的文件的变动，一旦有变动就会自动执行相应处理。但是它有一个问题，就是每当监听到一处变动时，就会大费周章地把所有被监听的文件都处理一遍

　　而newer插件的作用是处理contrib-watch插件的毛病，让watch在监听到某个文件变动时，仅仅对变动的文件进行事务处理

　　package.json的文件内容如下

{  "name": "project",  "version": "1.0.0",  "devDependencies": {"grunt": "^1.0.1","grunt-contrib-concat": "^1.0.1","grunt-contrib-csslint": "^2.0.0","grunt-contrib-cssmin": "^2.2.0","grunt-contrib-jshint": "^1.1.0","grunt-contrib-uglify": "^3.0.1","grunt-contrib-watch": "^1.0.0","grunt-contrib-requirejs": "^1.0.0","grunt-newer":"^1.3.0"
  }
}
登入後複製
登入後複製

　　Gruntfile.js的配置文件如下

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
      options: {
        stripBanners: true,
        banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +'<%= grunt.template.today("yyyy-mm-dd") %> */'  },
      myCSSDist: {
        src: ['src/css/*.css'],
        dest: 'src/css/concat/<%= pkg.name %>-<%= pkg.version %>.css'  },
      myJSDist: {
        src: ['src/js/*.js'],
        dest: 'src/js/concat/<%= pkg.name %>-<%= pkg.version %>.js'  },      
    },
    cssmin:{
      options: {
        stripBanners: true,
        banner: '/* <%= grunt.template.today("yyyy-mm-dd") %> */'        
      },
      build:{
        src: 'src/css/concat/<%= pkg.name %>-<%= pkg.version %>.css',
        dest: 'dist/css/<%= pkg.name %>-<%= pkg.version %>.min.css'        
      }

    },
    uglify:{
      options: {
        stripBanners: true,
        banner: '/* <%= grunt.template.today("yyyy-mm-dd") %> */'        
      },
      build:{
        src: 'src/js/concat/<%= pkg.name %>-<%= pkg.version %>.js',
        dest: 'dist/js/<%= pkg.name %>-<%= pkg.version %>.min.js'        
      }
    },
    jshint:{
      options:{
        jshintrc:'.jshintrc'  },
      build:['Gruntfile.js','src/js/*.js']
    },
    csslint:{
      options:{
        csslintrc:'.csslintrc'  },
      build:['src/css/*.css']      
    },
    watch:{
      build:{
        files: ['src/js/*.js','src/css/*.css'],
        tasks: ['newer:jshint','newer:csslint','newer:concat','newer:cssmin','newer:uglify'],
        options:{spawn:false}
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-csslint');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-newer');
  grunt.registerTask('default', ['newer:jshint','newer:csslint','newer:concat','newer:cssmin','newer:uglify','watch']);
};
登入後複製

　　执行命令grunt

grunt
登入後複製

　　由于'script1.js'的内容发生了变化，所以重新合并了js文件，project-1.0.0.min.js的内容如下

/* 2017-06-09 */console.log("a"),console.log("b");
登入後複製

　　由于css的内容没有发生变化，所以project-1.0.0.min.css的内容如下

/*! project - v1.0.0 - 2017-05-29 */body{margin:0}ul{list-style:none;margin:0;padding:0}
登入後複製

 

模块化

　　下面说明grunt如何与requireJS配合使用，需要使用contrib-requirejs插件

npm install grunt-contrib-requirejs
登入後複製

　　该插件的使用与r.js的使用类似，不需要建立单独的build.js文件，而是在Gruntfile.js中配置

　　设置如下项目结构，src为开发环境，dist为上线环境

　　在r.js中，可以使用'dir'配置项，将项目目录复制到一个新的地方。但是，在实际项目开发中，有许多文件与requirejs无关，也会被复制。所以，不应该使用'dir'，而应该使用'out'配置项，只是将入口文件main.js打包到一个新的地方

　　一般地，jQuery并不打包到main.js文件中。如果使用相对路径，打包前的main.js(开发环境)与jQuery存在路径依赖关系。打包后的main.js已经处于新的环境(上线环境)，但此时仍然与开发环境的jQuery存在路径依赖关系，不符合逻辑

　　所以，jQuery应该是上线环境的地址。由于打包后，main.js的config也会打包进行，新的main.js的位置发生变化，jQuery的相对路径也会变化。所以config应该写在index.html页面中。这样，在jQuery或main.js的路径发生变化时，可以进行改动

　　因此，script1.js和script2.js这两个文件的内容如下

//script.jsdefine(['jquery'],function (){return $('div').height();
})//s2.jsdefine(['jquery'],function (){return $('div').width();
})
登入後複製

　　main.js的内容如下

//main.jsrequire(['module/script1','module/script2'], function(a,b){
　　console.log(a);
　　console.log(b);
});
登入後複製

 　　index.html代码如下




    
    Document
登入後複製

　　package.json的文件内容如下

{  "name": "project",  "version": "1.0.0",  "devDependencies": {"grunt": "^1.0.1","grunt-contrib-concat": "^1.0.1","grunt-contrib-csslint": "^2.0.0","grunt-contrib-cssmin": "^2.2.0","grunt-contrib-jshint": "^1.1.0","grunt-contrib-uglify": "^3.0.1","grunt-contrib-watch": "^1.0.0","grunt-contrib-requirejs": "^1.0.0","grunt-newer":"^1.3.0"
  }
}
登入後複製
登入後複製

【contrib-requirejs插件配置】

　　由于该插件打包后的文件，内容还是使用原来的路径关系。但是，开发和线上的路径并不一致。所以，要把可能会变化的路径设置为'baseUrl'，其他的路径保持一致

　　[注意]contrib-requirejs插件不能与newer插件混用

    requirejs: {
      compile: {
        options: {
          baseUrl: 'src/js',
          paths:{
            jquery:'../../dist/js/jquery'  },
          name: 'main',       
          out:'dist/js/main.js',
          exclude: ['jquery']
        }
      }
    }
登入後複製

　　Gruntfile.js的配置文件如下

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
      options: {
        stripBanners: true,
        banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +'<%= grunt.template.today("yyyy-mm-dd") %> */'  },
      myCSSDist: {
        src: ['src/css/*.css'],
        dest: 'src/css/concat/<%= pkg.name %>-<%= pkg.version %>.css'  }
    },
    cssmin:{
      options: {
        stripBanners: true,
        banner: '/* <%= grunt.template.today("yyyy-mm-dd") %> */'        
      },
      build:{
        src: 'src/css/concat/<%= pkg.name %>-<%= pkg.version %>.css',
        dest: 'dist/css/<%= pkg.name %>-<%= pkg.version %>.min.css'        
      }

    },
    jshint:{
      options:{
        jshintrc:'.jshintrc'  },
      build:['Gruntfile.js','src/js/*.js']
    },
    csslint:{
      options:{
        csslintrc:'.csslintrc'  },
      build:['src/css/*.css']      
    },
    requirejs: {
      compile: {
        options: {
          baseUrl: 'src/js',
          paths:{
            jquery:'../../dist/js/jquery'  },
          name: 'main',       
          out:'dist/js/main.js',
          exclude: ['jquery']
        }
      }
    },
    watch:{
      build:{
        files: ['src/js/*.js','src/css/*.css'],
        tasks: ['newer:jshint','newer:csslint','newer:concat','newer:cssmin','newer:uglify','requirejs'],
        options:{spawn:false}
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-csslint');
  grunt.loadNpmTasks('grunt-contrib-requirejs');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-newer');

  grunt.registerTask('default', ['newer:jshint','newer:csslint','newer:concat','newer:cssmin','requirejs','watch']);
};
登入後複製

　　执行命令grunt

　　更改index.html页面如下，依然能正常显示

Document
登入後複製

 

　

以上是什麼是Grunt？對他的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
grunt
來源：php.cn
上一篇：JanaScript資料型態有哪些？ 下一篇：分享React 省市區三級連動實例代碼
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
XMLHttpRequest無法載入XXX，沒有'Access-Control-Allow-Origin'頭部 tl;dr;關於同源策略我有一個Grunt進程，它啟動了一個express.js伺服器的實例。直到剛才，這一切都運行得非常好，但現在它開始提供一個空白頁面，並在Chrome（最新版...
來自於 2023-09-21 16:34:22
0
2
260
使用webpack載入目錄中的所有文件，無需使用require語句的方法 我有大量的javascript檔案分散在我的應用程式的4個子目錄中。在grunt中，我將它們全部收集並編譯成一個檔案。這些檔案沒有module.exports函數。我想使用webp...
來自於 2023-08-22 14:25:18
0
2
161
javascript - grunt、gulp和webpack有什麼差別和各自的優缺點 現在開發專案webpack是必備，但在node.js的學習過程中，也學過gulp和grunt，只知道用，不知道有什麼差別和各自的優缺點。大家都來說說吧？
來自於 2017-06-28 09:24:42
0
1
604
javascript - grunt concat的問題 在grunt的watch裡加入了concat任務,但我發現concat做的是append操作,這樣的話前一次concat生成的程式碼還在,有什麼辦法解決麼{代碼...} 每次運行都...
來自於 2017-05-19 10:44:50
0
1
367
javascript - 現在公司流行用的前端打包工具是哪一個啊？ 我百度了，常用的有grunt，gulp,webpack,但是我想問已經工作的伙伴們，我現在想學習一個，到低哪個工具是目前比較常用或流行的？因為時間有點緊，不能全部學完
來自於 2017-05-19 10:42:39
0
1
347
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！