与Gulp一起使用Concat脚本

2020/10/19 15:41 · javascript ·  · 0评论

举例来说,假设您要在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无关紧要,它会查看目录中的文件。

那么有人对此有想法吗?

我有最好的办法是重新命名与供应商的脚本123给他们以正确的顺序,但我不知道如果我喜欢这个。

当我了解到更多信息后,我发现Browserify是一个很好的解决方案,乍一看可能很麻烦,但是却很棒。

最近,在构建AngularJS应用时,Grunt也遇到了类似的问题。这是我发布的问题

我最终要做的是在grunt配置中按顺序显式列出文件。配置文件将如下所示:

[
  '/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>

在构建目录中,您将引用main.min.js,其中将包含vendor.js,test.js和main.js

类型的流也可用于确保文件的具体顺序用gulp.srcbackbone.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脚本和流行的库,例如globbyfs-extra以及其他没有Gulp,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

希望这可以帮助!

对我来说,管道中有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,我的concatsrc看起来像这样:

    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只是看打印到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.srcgulp.src当我能够使用sleep()函数(使用.map睡眠时间按索引递增的命令)来正确排序流输出,我确定运行异步

src包含更多文件平均目录异步的结果是文件较少的目录之后,因为它们需要更长的处理时间。

在我的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

本文地址:http://javascript.askforanswer.com/yugulpyiqishiyongconcatjiaoben.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!