Concat 스크립트 순서대로 Gulp

Concat 스크립트 순서대로 Gulp

예를 들어 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, 하지만 파일들이 알파벳순으로 정리되어있기 때문에, 꿀꺽꿀꺽 삼킬것입니다.underscore.js끝나고backbone.js, 그리고 내 대본의 순서는source/index.html상관 없습니다. 디렉토리의 파일을 봅니다.

그래서 이것에 대한 아이디어가 있는 사람이 있습니까?

가장 좋은 방법은 다음과 같이 벤더 스크립트 이름을 변경하는 것입니다.1,2,3그들에게 제대로 된 명령을 내리기 위해서입니다만, 저는 이것이 마음에 드는지.

브라우징파이가 좋은 솔루션이라는 것을 더 많이 알게 되면서 처음에는 어려움을 겪을 수 있지만 훌륭합니다.

최근에 Angular를 만들 때 Grunt와 비슷한 문제가 있었습니다.JS app.제가 올린 질문이 있습니다.

제가 결국 하게 된 것은 grunt config에 파일을 순서대로 명시적으로 나열하는 것입니다.그러면 다음과 같이 구성 파일이 나타납니다.

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

Grunt는 어떤 파일이 중복되어 있는지 파악할 수 있고 어떤 파일이 포함되어 있지 않은지 파악할 수 있습니다.Gulp에서도 같은 기술이 적용될 것입니다.

일부 파일을 필요로 하는 경우 다음과 같은 특정 파일을 글로벌에서 제외하는 것도 도움이 됩니다.

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

이것을 채드 존슨의 답변에서 설명한 것처럼 우선해야 하는 파일을 지정하는 것과 결합할 수 있습니다.

저는 gulp-order 플러그인을 사용했지만 병합된 스트림이 있는 제 스택 오버플로 후 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

이것은 아무 문제 없이 꿀꺽꿀꺽 효과가 있습니다.

나는 내 스크립트를 바우어에서 꺼낼 때마다 다른 폴더에 정리하고, 내 앱을 위한 내 스크립트도 가지고 있습니다.어디선가 이 대본들의 순서를 나열할 예정이니 그냥 꿀꺽꿀꺽 파일에 나열해 보는 것은 어떨까요?프로젝트의 신규 개발자의 경우 모든 스크립트 엔드포인트가 여기에 나열되어 있어 좋습니다.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을 사용하는 것이 더 나을 수 있습니다.

스트림 시리즈를 사용해 보십시오.인터리빙 대신 끝까지 추가한다는 점을 제외하고는 merge-stream/event-stream.merge()처럼 작동합니다.스트림 큐와 같이 객체 모드를 지정할 필요가 없으므로 코드가 더 깔끔하게 나옵니다.

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는 항상 변경되고, 일부 라이브러리에는 사용할 수 없게 되거나 취약성이 포함되어 있거나, 종속성에 수년 동안 고정되지 않은 취약성이 포함되어 있습니다. 파일 사용자 지정 Node면정를는이다자트merr 를 사용하는 것이 좋습니다과 JS같은 입니다.globby그리고.fs-extraGulp, Grunt 등 포장지가 없는 다른 도서관들과 함께.

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

도움이 되길 바랍니다!

저는 파일의 순서를 바꾸던 파이프에 naturalSort()와 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}))

전 그냥 꿀꺽꿀꺽 각줄 정렬을 사용합니다.

function concatOrder() {

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

저는 모두가 핵심 의존적인 모듈 환경에 있습니다.는.core모듈을 다른 모듈보다 먼저 추가해야 합니다.

내가 한 일:

1. 모든 스크립트를 다음으로 이동합니다.src더
2. .gulp-rename당신의.core로에_core

3. 꿀꺽꿀꺽 마시는 것은 당신의 질서를 지키는 것입니다.gulp.src의 콩캣, 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()같은 순서일 겁니다순서를 유지합니다 입력의 글로빙 즉 유지합니다 순서를 the of the order, 입력의 bing 글로빙 preserve glob input , 같은 is 순서일 that 겁니다 즉 the <nat>,쉽죠?

증명코드는 다음과 .print단지 cli)에 인쇄된 주문을 보기 위한 것입니다.

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.src비동기식을 실행하고 있을 때 제가 사용할 수 있었습니다.sleep() (수(a용))를 합니다..mapindex)를 사용하여 스트림 순서화합니다. sleep time by index)를 합니다.

의 의 의 입니다.src처리 시간이 더 오래 걸렸기 때문에 파일 수가 더 많은 dirs가 파일 수가 더 적은 dirs 뒤를 이었습니다.

저의 포괄적인 설정에서는 먼저 벤더 파일을 지정한 다음 (더 일반적인) 모든 것을 지정합니다.그리고 다른 커스텀 제품보다 벤더 js를 성공적으로 우선시합니다.

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

"nosort" 옵션을 gulp.src gulp.src로 전달할 수 있다고 합니다.

언급URL : https://stackoverflow.com/questions/21961142/concat-scripts-in-order-with-gulp