Alex Dai Playground

Posts match “ grunt ” tag:

[Grunt] Install

| Comments

注意: 必須先安裝 Node.js (建議使用 nvm 安裝)

1.安裝

# 首先安裝 grunt cli 套件
$ npm install -g grunt-cli

# 專案下執行
$ npm init
$ npm intall -S grunt

目錄下會產生 node_modules 資料夾 與 package.json

2.產生 Gruntfile.js

$ touch Gruntfile.js

3.建立 Task

/**
 * Gruntfile.js
 */
module.exports = function(grunt) {
// $ grunt speak
grunt.registerTask('speak', function(){
    console.log("I'm Speaking");
});

// $ grunt yell
grunt.registerTask('yell', function(){
    console.log("I'm YELLING");
});

// $ grunt both
grunt.registerTask('both', ['speak', 'yell']);

// $ grunt
grunt.registerTask('default', ['speak', 'yell']);

};

4.執行 Task

$ grunt speak
$ grunt yell
$ grunt both
$ grunt

[Grunt] Install Plugin

| Comments

安裝 contrib-concat 套件

1.Insatll Plugin

contrib-concat 的功能是用來合併檔案

$ npm install grunt-contrib-concat --save-dev

2.Init Config

#Gruntfile.js
module.exports = function(grunt) {

  grunt.initConfig({
    concat: {
      options: {
        // separator: ';',
      },
      dist: { // dist 可以是任何值
        src: ['js/1.js', 'js/2.js'],
        dest: 'build/script.js',
      },
    },
  });
  grunt.loadNpmTasks('grunt-contrib-concat');

};
執行前 目錄結構
 ├── grunt
 ├── js
 │   ├── 1.js
 │   └── 2.js
 ├── node_modules
 │   └── *...
 ├── Gruntfile.js
 ├── package.json

3.Run

$ grunt concat

4.Result

執行後會產生 build 目錄且底下有一個 script.js(1.js與2.js合併)

執行後 目錄結構
 ├── grunt
 ├── build
 │   └── script.js
 ├── js
 │   ├── 1.js
 │   └── 2.js
 ├── node_modules
 │   └── *...
 ├── Gruntfile.js
 ├── package.json

5.Modify

再加上css

grunt.initConfig({
  concat: {
    js: {
      src: ['js/1.js', 'js/2.js'],
      dest: 'build/script.js',
    },
    css: {
      src: ['css/main.css', 'css/theme.css'],
      dest: 'build/style.css',
    },
  },
});
執行前 目錄結構
├── grunt
├── js
│   ├── 1.js
│   └── 2.js
├── css
│   ├── main.css
│   └── theme.css
├── node_modules
│   └── *...
├── Gruntfile.js
├── package.json

6.Run Again

$ grunt concat
執行後 目錄結構
├── grunt
├── build
│   ├── script.js
│   └── style.css
├── js
│   ├── 1.js
│   └── 2.js
├── css
│   ├── main.css
│   └── theme.css
├── node_modules
│   └── *...
├── Gruntfile.js
├── package.json