通過完整堆棧中的nodejs模塊編譯web資源的最佳實踐php/js web應用程序

Question

我正在尋找一種方法來在完整的堆棧web應用程序中將我的web資源一起編譯。例如，假設我們有以下框架，庫和模塊在我們的web應用程序中使用：

• PHP與Symfony的
• JavaScript和角度或jQuery和其他許多圖書館一樣CLDR，全球化，滑塊等
• 使用NodeJS和Composer進行後端編譯

這是傳統上爲現代Web應用程序設計的典型或更好的方法。而且我正在努力如何以及如何使用哪些模塊，以平滑的方式將我的所有資產編譯到我的構建目標中。就我而言，它是一個公共可訪問的Web文件夾，其中包含我的所有資產。 這裏有必要編譯下面的事情：

• JavaScript庫（一個或多個* .js文件）
• 字體和圖像在這樣的JavaScript庫用於其它使用
• CSS/LESS/SCSS文件框架（如引導）或JavaScript庫
• 或一羣所有這些與庫來

主要的事情做的涼亭在這一點上的使用。但bower實際上並不在乎我們如何將單個文件庫編譯成單個文件，以及如何將字體和/或圖像複製到構建目標。 我已經看過grunt，bower和Yeoman。最後一個似乎是一個很好的工具來包裝我喜歡的東西。

任何幫助，提示，或在這一點上的使用經驗將是偉大的。我認爲這是很多開發者的常見問題，但尚未得到解答。我在網上搜索了幾個小時。所以，任何幫助將受到歡迎。

Answer 1

我現在在使用Node JS，Grunt和bootstrap-sass。所以，我們也有其他資產，不會被編譯投擲我的任務。所以我添加了一個同步任務。它只複製兩條路徑之間的修改文件。這個偉大的工程給我，但我不知道，如果它的最佳實踐：

/** 
* My Gruntfile. 
* 
*/ 
module.exports = function (grunt) 
{ 
    grunt.loadNpmTasks("grunt-sass"); 
    grunt.loadNpmTasks("grunt-sass-lint"); 
    grunt.loadNpmTasks("grunt-bootlint"); 
    grunt.loadNpmTasks("grunt-contrib-jshint"); 
    grunt.loadNpmTasks("grunt-postcss"); 
    grunt.loadNpmTasks("grunt-sync"); 

    var relaxerrors = [ 
     "App/Mvc/views/notallowed.phtml", 
     "App/Mvc/views/ajax/*.phtml", 
     "App/Mvc/views/event/*.phtml", 
     "App/Mvc/views/forum/*.phtml", 
     "App/Mvc/views/index/news.phtml", 
    ]; 

    grunt.initConfig({ 
      sass: { 
       options: { 
        includePaths: ["node_modules/bootstrap-sass/assets/stylesheets/bootstrap"], 
        precision: 10, 
        sourcemap: "inline", 
        trace: true, 
        unixNewlines: true 
       }, 
       dist: { 
        files: { 
         "web/css/frontend.min.css": "assets/styles/frontend.scss", 
         "web/css/backend.min.css": "assets/styles/backend.scss", 
         "web/lib/bootstrap/css/bootstrap.min.css": "node_modules/bootstrap-sass/assets/stylesheets/bootstrap.scss" 
        } 
       } 
      }, 
      sasslint: { 
       target: [ "assets/styles/*.scss" ] 
      }, 
      jshint: { 
       files: [ "assets/js/*.js" ], 
       options: { 
        globals: { 
         jquery: true 
        } 
       } 
      }, 
      bootlint: { 
       options: { 
        stoponerror: true, 
        showallerrors: true, 
        stoponwarning: false, 
        relaxerror: { 
         "E001": relaxerrors, 
         "W001": relaxerrors, 
         "W002": relaxerrors, 
         "W003": relaxerrors, 
         "W005": relaxerrors 
        } 
       }, 
       files: [ "App/Mvc/views/*.phtml", "App/Mvc/views/*.html" ] 
      }, 
      postcss: { 
       options: { 
        map: true, 
        processors: [ 
         require("pixrem")(), // add fallbacks for rem units 
         require("autoprefixer")({ 
          browsers: ["last 2 versions"] 
         }) 
        ] 
       }, 
       dist: { 
        src: ["web/lib/bootstrap/css/*.css", "web/css/*.css"] 
       } 
      }, 
      sync: { 
       main: { 
       files: [{ 
        src: [ 
         "node_modules/bootstrap-sass/assets/fonts/**", // include everything 
         '!**/*.txt' // but exclude txt files 
        ], 
        dest: 'web/lib/bootstrap/fonts', 
       }], 
       pretend: true, // Don't do any IO. Before you run the task with `updateAndDelete` PLEASE MAKE SURE it doesn't remove too much. 
       verbose: true // Display log messages when copying files 
       } 
      } 
     } 
    ); 

    grunt.registerTask("validate:styles", [ "sasslint" ]); 
    grunt.registerTask("validate:js", [ "jshint" ]); 
    grunt.registerTask("validate:bootstrap", [ "bootlint" ]); 
    grunt.registerTask("validate:all", [ "validate:bootstrap", "validate:styles", "validate:js" ]); 
    grunt.registerTask("build:styles", [ "validate:styles", "sass", "postcss", "sync" ]); 

    // default task. Run all 
    grunt.registerTask("default", [ "validate:all", "sass", "postcss", "sync" ]); 
}; 

和我的package.json：

{ 
    "name": "myProjectDeps", 
    "version": "1.0.0", 
    "dependencies": { 
    "grunt": "^1.0.1", 
    "grunt-bootlint": "^0.10.1", 
    "grunt-cli": "^1.2.0", 
    "grunt-contrib-compress": "^1.3.0", 
    "grunt-contrib-concat": "^1.0.1", 
    "grunt-contrib-cssmin": "^1.0.2", 
    "grunt-contrib-jshint": "^1.0.0", 
    "grunt-contrib-uglify": "^2.0.0", 
    "grunt-sass-lint": "^0.2.0", 
    "grunt-sync": "^0.6.2" 
    }, 
    "devDependencies": { 
    "autoprefixer": "^6.5.1", 
    "bootstrap-sass": "^3.3.7", 
    "grunt-postcss": "^0.8.0", 
    "grunt-sass": "^1.2.1", 
    "node-sass": "^3.10.1", 
    "pixrem": "^3.0.2", 
    "typescript": "^2.0.6", 
    "typings": "^1.5.0" 
    } 
} 

如果它不爲你這方面的工作，在全球安裝的哼聲和在node_modules中調用與你的項目根相關的grunt文件， G。

my/dir/root> ./node_modules/bin/grunt valdiate:styles 

（未測試，如果它工作）。