Gulp를 사용한 Concat 스크립트

예를 들어 Backbone 또는 기타 프로젝트에서 프로젝트를 빌드 중이고 특정 순서로 스크립트를로드해야합니다 (예 : underscore.js이전에로드해야 함) backbone.js.

순서대로 스크립트를 연결하려면 어떻게해야합니까?

// JS concat, strip debugging and minify
gulp.task('scripts', function() {
    gulp.src(['./source/js/*.js', './source/js/**/*.js'])
    .pipe(concat('script.js'))
    .pipe(stripDebug())
    .pipe(uglify())
    .pipe(gulp.dest('./build/js/'));
});

내에서 올바른 스크립트 순서가 source/index.html있지만 파일이 알파벳 순서로 구성되어 있기 때문에 gulp는 underscore.js이후 backbone.js에 연결 되며 내 스크립트의 순서는 source/index.html중요하지 않으므로 디렉토리의 파일을 찾습니다.

누구든지 이것에 대한 아이디어가 있습니까?

내가 가진 최고의 아이디어와 공급 업체 스크립트의 이름을 변경하는 것입니다 1, 2, 3그들에게 적절한 순서를 제공하지만,이 같은 내가 있는지 확실하지 않다.

더 많은 것을 알았을 때 Browserify가 훌륭한 솔루션이라는 것을 알았습니다. 처음에는 고통이 될 수 있지만 훌륭합니다.

AngularJS 앱을 만들 때 최근 Grunt와 비슷한 문제가 발생했습니다. 여기 질문 내가 게시는.

내가 한 일은 grunt 설정에서 파일을 명시 적으로 나열하는 것입니다. 구성 파일은 다음과 같습니다.

[
  '/path/to/app.js',
  '/path/to/mymodule/mymodule.js',
  '/path/to/mymodule/mymodule/*.js'
]

그런트는 어떤 파일이 중복되어 있는지 파악하고 포함하지 않을 수 있습니다. Gulp에서도 동일한 기술을 사용할 수 있습니다.

한 덩어리의 파일 뒤에 오는 파일이 필요한 경우 도움이되는 또 다른 것은 다음 과 같이 글로브에서 특정 파일을 제외시키는 것입니다.

[
  '/src/**/!(foobar)*.js', // all files that end in .js EXCEPT foobar*.js
  '/src/js/foobar.js',
]

이것을 Chad Johnson의 답변에 설명 된대로 가장 먼저 필요한 파일을 지정하는 것과 결합 할 수 있습니다.

gulp-order 플러그인을 사용했지만 스택 오버플로 post gulp-order 노드 모듈에서 병합 된 스트림으로 볼 수 있듯이 항상 성공하지는 않습니다 . Gulp 문서를 탐색 할 때 스트림 연결 모듈을 발견했습니다.이 모듈은 순서대로 연결 순서를 지정하는 데 매우 효과적이었습니다. https://github.com/gulpjs/gulp/blob/master/docs/recipes/using-multiple-sources-in-one-task.md

내가 사용한 방법의 예는 다음과 같습니다.

var gulp         = require('gulp');
var concat       = require('gulp-concat');
var handleErrors = require('../util/handleErrors');
var streamqueue  = require('streamqueue');

gulp.task('scripts', function() {
    return streamqueue({ objectMode: true },
        gulp.src('./public/angular/config/*.js'),
        gulp.src('./public/angular/services/**/*.js'),
        gulp.src('./public/angular/modules/**/*.js'),
        gulp.src('./public/angular/primitives/**/*.js'),
        gulp.src('./public/js/**/*.js')
    )
        .pipe(concat('app.js'))
        .pipe(gulp.dest('./public/build/js'))
        .on('error', handleErrors);
});

gulp-useref를 사용하면 색인 파일에 선언 된 모든 스크립트를 선언 된 순서대로 연결할 수 있습니다.

https://www.npmjs.com/package/gulp-useref

var $ = require('gulp-load-plugins')();
gulp.task('jsbuild', function () {
  var assets = $.useref.assets({searchPath: '{.tmp,app}'});
  return gulp.src('app/**/*.html')
    .pipe(assets)
    .pipe($.if('*.js', $.uglify({preserveComments: 'some'})))
    .pipe(gulp.dest('dist'))
    .pipe($.size({title: 'html'}));
});

그리고 HTML에서 다음과 같이 생성하려는 빌드 파일의 이름을 선언해야합니다.

<!-- build:js js/main.min.js -->
    <script src="js/vendor/vendor.js"></script>
    <script src="js/modules/test.js"></script>
    <script src="js/main.js"></script>

빌드 디렉토리에는 vendor.js, test.js 및 main.js를 포함하는 main.min.js에 대한 참조가 있습니다.

정렬 스트림은 또한 가진 파일의 특정 순서를 보장하기 위해 사용될 수있다 gulp.src. backbone.js항상 처리 할 마지막 파일로 두는 샘플 코드 :

var gulp = require('gulp');
var sort = require('sort-stream');
gulp.task('scripts', function() {
gulp.src(['./source/js/*.js', './source/js/**/*.js'])
  .pipe(sort(function(a, b){
    aScore = a.path.match(/backbone.js$/) ? 1 : 0;
    bScore = b.path.match(/backbone.js$/) ? 1 : 0;
    return aScore - bScore;
  }))
  .pipe(concat('script.js'))
  .pipe(stripDebug())
  .pipe(uglify())
  .pipe(gulp.dest('./build/js/'));
});

파일 이름의 시작 부분에 숫자를 추가합니다.

0_normalize.scss
1_tikitaka.scss
main.scss

그것은 아무런 문제없이 꿀꺽 꿀꺽에서 작동합니다.

bower에서 가져온 각 패키지마다 스크립트를 다른 폴더에 구성하고 내 앱을위한 스크립트도 있습니다. 이 스크립트의 순서를 어딘가에 나열 할 것이므로 왜 gulp 파일에 나열하지 않습니까? 프로젝트의 새로운 개발자의 경우 모든 스크립트 엔드 포인트가 여기에 나열되어있는 것이 좋습니다. gulp-add-src로 이것을 할 수 있습니다 :

gulpfile.js

var gulp = require('gulp'),
    less = require('gulp-less'),
    minifyCSS = require('gulp-minify-css'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat'),
    addsrc = require('gulp-add-src'),
    sourcemaps = require('gulp-sourcemaps');

// CSS & Less
gulp.task('css', function(){
    gulp.src('less/all.less')
        .pipe(sourcemaps.init())
        .pipe(less())
        .pipe(minifyCSS())
        .pipe(sourcemaps.write('source-maps'))
        .pipe(gulp.dest('public/css'));
});

// JS
gulp.task('js', function() {
    gulp.src('resources/assets/bower/jquery/dist/jquery.js')
    .pipe(addsrc.append('resources/assets/bower/bootstrap/dist/js/bootstrap.js'))
    .pipe(addsrc.append('resources/assets/bower/blahblah/dist/js/blah.js'))
    .pipe(addsrc.append('resources/assets/js/my-script.js'))
    .pipe(sourcemaps.init())
    .pipe(concat('all.js'))
    .pipe(uglify())
    .pipe(sourcemaps.write('source-maps'))
    .pipe(gulp.dest('public/js'));
});

gulp.task('default',['css','js']);

참고 : jQuery 및 Bootstrap은 데모 목적으로 추가되었습니다. CDN은 널리 사용되며 브라우저는 이미 다른 사이트에서 캐시 할 수 있기 때문에 CDN을 사용하는 것이 좋습니다.

stream-series을 사용해보십시오 . 인터리빙 대신 끝에 추가한다는 점을 제외하면 merge-stream / event-stream.merge () 와 같이 작동합니다 . streamqueue 와 같은 객체 모드를 지정할 필요가 없으므로 코드가 더 깨끗합니다.

var series = require('stream-series');

gulp.task('minifyInOrder', function() {
    return series(gulp.src('vendor/*'),gulp.src('extra'),gulp.src('house/*'))
        .pipe(concat('a.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dest'))
});

merge2 는 현재 작동하고 유지 관리되는 유일한 스트림 병합 도구처럼 보입니다.

2020 업데이트

API는 항상 변경되고 일부 라이브러리는 사용할 수 없게되거나 취약점을 포함하거나 해당 종속성이 취약점을 포함하며 수년간 수정되지 않았습니다. 텍스트 파일 조작을 위해 당신은 더 나은 사용하는 사용자 정의 NodeJS 스크립트와 같은 인기있는 라이브러리 거라고 globby및 fs-extra기타 래퍼 꿀꺽, 그런트없이 다른 라이브러리와 함께합니다.

import globby from 'globby';
import fs from 'fs-extra';

async function bundleScripts() {
    const rootPaths = await globby('./source/js/*.js');
    const otherPaths = (await globby('./source/**/*.js'))
        .filter(f => !rootFiles.includes(f));
    const paths = rootPaths.concat(otherPaths);

    const files = Promise.all(
        paths.map(
            // Returns a Promise
            path => fs.readFile(path, {encoding: 'utf8'})
        )
    );

    let bundle = files.join('\n');
    bundle = uglify(bundle);
    bundle = whatever(bundle);
    bundle = bundle.replace(/\/\*.*?\*\//g, '');

    await fs.outputFile('./build/js/script.js', bundle, {encoding: 'utf8'});
}

bundleScripts.then(() => console.log('done');

다른 방법은이 문제를 위해 특별히 만든 Gulp 플러그인을 사용하는 것입니다. https://www.npmjs.com/package/gulp-ng-module-sort

다음 .pipe(ngModuleSort())과 같이 추가하여 스크립트를 정렬 할 수 있습니다 .

var ngModuleSort = require('gulp-ng-module-sort');
var concat = require('gulp-concat');

gulp.task('angular-scripts', function() {
    return gulp.src('./src/app/**/*.js')
        .pipe(ngModuleSort())
        .pipe(concat('angularAppScripts.js))
        .pipe(gulp.dest('./dist/));
});

다음의 디렉토리 규칙을 가정합니다.

|——— src/
|   |——— app/
|       |——— module1/
|           |——— sub-module1/
|               |——— sub-module1.js
|           |——— module1.js
|       |——— module2/
|           |——— sub-module2/
|               |——— sub-module2.js
|           |——— sub-module3/
|               |——— sub-module3.js
|           |——— module2.js
|   |——— app.js

도움이 되었기를 바랍니다!

나를 위해 파일을 재정렬하는 파이프에 natualSort () 및 angularFileSort ()가있었습니다. 나는 그것을 제거하고 이제는 잘 작동합니다.

$.inject( // app/**/*.js files
    gulp.src(paths.jsFiles)
      .pipe($.plumber()), // use plumber so watch can start despite js errors
      //.pipe($.naturalSort())
      //.pipe($.angularFilesort()),
    {relative: true}))

난 그냥 gulp-angular-filesort를 사용합니다

function concatOrder() {

    return gulp.src('./build/src/app/**/*.js')
        .pipe(sort())
        .pipe(plug.concat('concat.js'))
        .pipe(gulp.dest('./output/'));
}

나는 모두 gulp를 사용하는 코어 의존적 인 모듈 환경에 있습니다. 따라서 core다른 모듈보다 먼저 모듈을 추가해야합니다.

제가 한:

1. 모든 스크립트를 src폴더로 이동
2. 그냥 gulp-rename당신 core에 디렉토리_core

3. gulp은의 순서를 유지하고 gulp.src있으며 내 concat src은 다음과 같습니다.

   concat: ['./client/src/js/*.js', './client/src/js/**/*.js', './client/src/js/**/**/*.js']

분명히 _목록에서 첫 번째 디렉토리로 사용됩니다 (자연 정렬?).

참고 (angularjs) : 그런 다음 gulp -angular-extender 를 사용 하여 모듈을 모듈에 동적으로 추가합니다 core. 다음과 같이 컴파일되었습니다.

angular.module('Core', ["ui.router","mm.foundation",(...),"Admin","Products"])

여기서 Admin과 Products는 두 개의 모듈입니다.

써드 파티 라이브러리 종속성을 주문하려면 wiredep을 시도 하십시오 . 이 패키지는 기본적으로 bower.json의 각 패키지 종속성을 확인한 다음 연결합니다.

이 페이지에서 여러 솔루션을 시도했지만 아무것도 작동하지 않았습니다. 알파벳순으로 폴더 이름을 정렬하기 위해 일련의 번호가 매겨진 파일이 있었으므로 파이프로 연결할 때 concat()동일한 순서로 정렬됩니다. 즉, 글 로빙 입력의 순서를 유지하십시오. 쉬워요?

구체적인 개념 증명 코드 print는 다음과 같습니다 ( 주문을 진료소에 인쇄하는 것입니다).

var order = require('gulp-order');
var gulp = require('gulp');
var print = require('gulp-print').default;

var options = {};

options.rootPath = {
  inputDir: process.env.INIT_CWD + '/Draft',
  inputGlob: '/**/*.md',
};

gulp.task('default', function(){
  gulp.src(options.rootPath.inputDir + options.rootPath.inputGlob, {base: '.'})
    .pipe(order([options.rootPath.inputDir + options.rootPath.inputGlob]))
    .pipe(print());
});

광기의 이유는 gulp.src무엇입니까? 그 결정 gulp.srcI가 이용할 수있을 때 비동기 실행되었다 sleep()(a 이용한 함수 .map적절히 스트림 출력을 주문 인덱스 증분 휴면 함께 참조).

src더 많은 파일이 포함 된 평균 dirs 의 비동기 결과는 처리하는 데 시간이 오래 걸리기 때문에 더 적은 파일이있는 dirs를 따릅니다.

내 gulp 설정에서 공급 업체 파일을 먼저 지정한 다음 (일반적인) 모든 것을 지정합니다. 그리고 벤더 js를 다른 사용자 정의 항목보다 먼저 배치합니다.

gulp.src([
  // vendor folder first
  path.join(folder, '/vendor/**/*.js'),
  // custom js after vendor
  path.join(folder, '/**/*.js')
])    

분명히 "nosort"옵션을 gulp.src gulp.src로 전달할 수 있습니다.