2013-08-27 53 views
8

Tôi có một tập tin grunt mà tôi đang sử dụng để xây dựng ứng dụng web của mình.Cách tạo tác vụ grunt tham chiếu đến các tác vụ grunt khác

này grunt tập sử dụng một số grunt plugins contrib như clean, copy, compass, cssmin, vv để xây dựng đúng cách các ứng dụng web.

Điều này grunt tệp cũng được cho là xử lý việc tạo CSS và sao chép tệp để tạo tệp CSS theo chủ đề. Hiện tại, tôi đang thêm mục tiêu vào các nhiệm vụ clean, copycompass (v.v) của mình cho từng chủ đề.

Điều này đang trở nên khó sử dụng trong tệp grunt và sẽ làm cho nó khó khăn và dễ bị lỗi khi thêm chủ đề mới.

Để làm cho mọi việc dễ dàng hơn, tôi thực sự muốn tạo tùy chỉnh riêng của tôi "chủ đề" grunt nhiệm vụ đó sẽ nội bộ sử dụng grunt các nhiệm vụ khác contrib (clean, copy, compass, vv) để thực hiện tất cả các nhiệm vụ cần thiết cho một chủ đề cụ thể.

Chỉ với một lượng nhỏ dữ liệu cấu hình cho chủ đề (chủ yếu là thư mục nguồn), tôi sẽ có đủ thông tin để gọi các tác vụ khác (vì nguồn chủ đề và tệp đích được định hướng theo quy ước).

Tôi dường như không thể tìm cách gọi nhiệm vụ từ bên trong tác vụ tùy chỉnh của mình, nơi tôi có thể thực hiện và chỉ định tất cả tùy chọn cấu hình, tệp, v.v.

Có ai có ý tưởng nào về cách tôi có thể thực hiện việc này không?

Cảm ơn, Ed

+0

Tôi không chắc chắn những gì bạn muốn đạt được. Có lẽ bạn có thể cung cấp một ví dụ mã nhỏ cho thấy vấn đề của bạn? –

Trả lời

1
grunt.initConfig({ 
    clean: {/!* clean task configuration *!/}, 
    copy: {/!* copy task configuration *!/}, 
    compass: {/!* compass task configuration *!/}, 
    cssmin: {/!* cssmin task configuration *!/} 
}); 

grunt.registerTask('theme', function() { 
    var tasks = [ 
      'clean', 
      'copy', 
      'compass', 
      'cssmin' 
    ]; 

    tasks.forEach(function (task) { 
     grunt.task.run(task); 
    }); 
}); 
+2

Hoặc đơn giản hơn là 'grunt.task.run (tasks)' – Kjir

7

tôi dường như không thể tìm thấy một cách để gọi một nhiệm vụ từ bên trong nhiệm vụ tùy chỉnh của tôi nơi tôi có thể làm điều đó và chỉ định tất cả các tùy chọn cấu hình, tập tin, vv theo lập trình.

Tôi không nghĩ bạn có thể chạy đa nhiệm grunt với cấu hình cụ thể, vì cấu hình đa nhiệm được đọc từ các mục tiêu được chỉ định trong cấu hình nhiệm vụ.

Vì vậy, một cách để thực hiện việc này là sửa đổi cấu hình nhiệm vụ trước khi chạy.

Dưới đây là một ví dụ rất cơ bản:

grunt.registerMultiTask('theme', function() { 
    var themeName = this.options().name; 
    grunt.config.set('yourOtherTask.dist.options.name', themeName); 
    grunt.task.run('yourOtherTask'); 
}); 
+0

Tôi yêu bạn - đây là những gì tôi cần! – Spock

+0

Wow, cảm ơn bạn. Điều này tiết kiệm rất nhiều thời gian cho tôi – Srini

1

tôi đã cùng một vấn đề và giải quyết nó.

Lưu ý: grunt là tất cả các JavaScript chạy trong nút, vì vậy bạn có thể thực hiện bất kỳ điều gì hỗ trợ JavaScript và nút.

việc Giải pháp của tôi như thế này:

Đầu tiên, đặt tất cả các công cụ cho grunt của ứng dụng cốt lõi của bạn trong một tập tin JavaScript riêng biệt ví dụ "grunt-my-app-core.js". Trong đó xuất hai chức năng, init(grunt)getConfig(grunt, options).

(function() { 
    "use strict"; //enable ECMAScript 5 Strict Mode 

    function init(grunt) { 
    } 

    function getConfig(grunt, options) { 
     return {}; 
    } 


    /////////////////////////// 
    // Exports 
    exports = module.exports = { 
     init: init, 
     getConfig: getConfig 
    }; 
})(); 

init(grunt) là tải và đăng ký tác vụ. Có thể là như thế này:

/** 
* public API 
* 
* add all required settings to grunt 
* 
* register task "dist" and task "doc" 
* 
* @param {object} grunt the grunt instance 
* @return {void} 
*/ 
function init(grunt) { 
    // overwrite platform specific setting get always unix like line feed char 
    grunt.util.linefeed = '\n'; 

    // Load plugins provide necessary task. 
    grunt.loadNpmTasks('grunt-contrib-clean'); 
    grunt.loadNpmTasks('grunt-contrib-copy'); 
    grunt.loadNpmTasks('grunt-contrib-uglify'); 
    grunt.loadNpmTasks('grunt-contrib-less'); 

    grunt.registerTask('dist', ['clean:build', 'copy:build', 'copy:dist', 'uglify', 'less']); 
    grunt.registerTask('doc', ['clean:doc', 'copy:doc']); 
} 

getConfig(grunt, options) sẽ xây dựng và trả lại đối tượng cấu hình:

/** 
* public API 
* 
* will return a config object that have to be given as argument to "grunt.initConfig" 
* 
* @param {object} grunt the grunt instance 
* @param {object|undefined} options to change some pathes 
* @return {object}   the configuration object for initConfig 
*/ 
function getConfig(grunt, options) { 

    options = options || {}; 

    var buildDir = options.buildDir || "build/"; 
    var distDir = options.distDir || "dist/"; 
    var docDir = options.docDir || "doc/"; 

    // ... doing some stuff to collect files or what ever ... 

    return { 
     clean: { 
      build: { 
       src: [buildDir] 
      }, 
      doc: { 
       src: [docDir] 
      } 
     }, 
     copy: { 
      // ... 
     } 
     // ... add here all the stuff you like to config ... 
    }; 
} 

và hơn, các Gruntfile.js trong dự án chủ đề của bạn có thể rất ngắn và không cần tất cả những gì thuộc ứng dụng cốt lõi của bạn. Có thể giống như sau:

/** 
* Module dependencies. 
*/ 
var gruntMyApp = require("../my-app/grunt-my-app-core.js"); 

/*global module:false*/ 
module.exports = function(grunt) { 

    var config = gruntMyApp.getConfig(grunt); 

    // ... extend config, if you need it 

    grunt.initConfig(config); 

    // will register Task "dist" and "doc" 
    gruntMyApp.init(grunt); 

    // Default task. 
    grunt.registerTask('default', ['dist', 'doc']); 
}; 

Bây giờ, nếu bạn thay đổi thứ gì đó trên ứng dụng cốt lõi, tất cả chủ đề sẽ nhận được điều này. Điều duy nhất bạn cần cập nhật thủ công là devDependencies trong tệp package.json.

+0

Làm thế nào bạn sẽ chia sẻ một "siêu nhiệm vụ" giữa các dự án (phụ thuộc npm dường như không hoạt động trong trường hợp này ..) – phtrivier

+0

Tôi bao gồm các ứng dụng cốt lõi thông qua git submodule vào các dự án chủ đề. – TLindig

+0

@Downvoter: Xin vui lòng cho tôi biết, lý do cho dwonvote của bạn là gì! – TLindig

5

Như dễ dàng như thế này:

concat: { 
    web: { 
    src: ['web/**/*.js'], 
    dest: 'dist/main.js' 
    } 
}, 

uglify: { 
    server: { 
    src: '<%= concat.web.dest %>', 
    dest: '<%= concat.web.dest %>.min.js' 
    } 
},