전체 스택 php/js 웹 응용 프로그램에서 nodejs 모듈을 통해 웹 자산을 컴파일하는 모범 사례

Question

전체 스택 웹 응용 프로그램에서 웹 자산을 함께 컴파일하는 방법을 찾고 있습니다. 예를 들어, 우리는 다음과 같은 프레임 워크, 라이브러리와 모듈은 우리의 웹 응용 프로그램에 사용했다고 가정 : 슬라이더 등, 세계화, 심포니

• PHP 각도 또는 JQuery와 및 CLDR 같은 많은 다른 라이브러리와
• 자바 스크립트
• NodeJS 및 Composer를 사용한 백엔드 컴파일

이것은 전통적으로 현대 웹 응용 프로그램 용으로 설정되어 있습니다. 그리고 어떻게 모듈을 사용하여 모든 자산을 원활하게 컴파일하여 내 빌드 대상에 넣을 수 있는지 고민하고 있습니다. 필자의 경우에는 폴더에 번들로 묶은 모든 자산이있는 공용 액세스 가능한 웹 폴더입니다.

CSS/LESS/SCSS 파일이 다른에 사용하여 자바 스크립트 라이브러리에서 사용

• 자바 스크립트 라이브러리 (하나 이상의 * .js 파일)
• 글꼴 및 이미지 : 다음과 같은 사항을 컴파일이 켜지지입니다 프레임 워크 (부트 스트랩 등) 또는 자바 스크립트 라이브러리
• 또는 라이브러리와

주요 일들이 시점에서 정자를 수행 오는 모든 이들의의 무리에 사용됩니다. 그러나 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, e에서 프로젝트 루트와 관련된 grunt 파일을 호출하십시오. 지.

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

(작동하는 경우 테스트되지 않음).