Concat scripts in order with Gulp

Question

Say  for example  you are building a project on Backbone or whatever and you need to load scripts in a certain order  e g  underscore js needs to be loaded before backbone js   How do I get it to concat the scripts so that they   re in order       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            I have the right order of scripts in my source index html  but since files are organized by alphabetic order  gulp will concat underscore js after backbone js  and the order of the scripts in my source index html does not matter  it looks at the files in the directory   So does anyone have an idea on this   Best idea I have is to rename the vendor scripts with 1  2  3 to give them the proper order  but I am not sure if I like this   As I learned more I found Browserify is a great solution  it can be a pain at first but it   s great

User · Answer

merge2 looks like the only working and maintained ordered stream merging tool at the moment.

Update 2020

The APIs are always changing, some libraries become unusable or contain vulnerabilities, or their dependencies contain vulnerabilities, that are not fixed for years. For text files manipulations you'd better use custom NodeJS scripts and popular libraries like globby and fs-extra along with other libraries without Gulp, Grunt, etc wrappers.

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');

User · Answer

I have my scripts organized in different folders for each package I pull in from bower  plus my own script for my app  Since you are going to list the order of these scripts somewhere  why not just list them in your gulp file  For new developers on your project  it s nice that all your script end-points are listed here  You can do this with 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  amp  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       Note  jQuery and Bootstrap added for demonstration purposes of order  Probably better to use CDNs for those since they are so widely used and browsers could have them cached from other sites already

User · Answer

Try stream-series  It works like merge-stream event-stream merge   except that instead of interleaving  it appends to the end  It doesn t require you to specify the object mode like streamqueue  so your code comes out cleaner    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

User · Answer

An alternative method is to use a Gulp plugin created specifically for this problem  https   www npmjs com package gulp-ng-module-sort  It allows you to sort your scripts by adding in a  pipe ngModuleSort    as such    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           Assuming a directory convention of               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   Hope this helps

User · Answer

I just use gulp-angular-filesort  function concatOrder          return gulp src    build src app      js            pipe sort             pipe plug concat  concat js             pipe gulp dest    output

User · Answer

Another thing that helps if you need some files to come after a blob of files  is to exclude specific files from your glob  like so         src      foobar   js      all files that end in  js EXCEPT foobar  js     src js foobar js       You can combine this with specifying files that need to come first as explained in Chad Johnson s answer

User · Answer

if you would like to order third party libraries dependencies  try wiredep  This package basically checks each package dependency in bower json then wire them up for you

User · Answer

The sort-stream may also be used to ensure specific order of files with gulp src  Sample code that puts the backbone js always as the last file to process   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

User · Answer

I tried several solutions from this page  but none worked  I had a series of numbered files which I simply wanted be ordered by alphabetical foldername so when piped to concat   they d be in the same order  That is  preserve the order of the globbing input  Easy  right   Here s my specific proof-of-concept code  print is just to see the order printed to the 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           The reason for the madness of gulp src  I determined that gulp src was running async when I was able to use a sleep   function  using a  map with sleeptime incremented by index  to order the stream output properly    The upshot of the async of src mean dirs with more files in it came after dirs with fewer files  because they took longer to process

User · Answer

With gulp-useref you can concatenate every script declared in your index file  in the order in which you declare it    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            And in the HTML you have to declare the name of the build file you want to generate  like this    lt  -- build js js main min js -- gt       lt script src  js vendor vendor js  gt  lt  script gt       lt script src  js modules test js  gt  lt  script gt       lt script src  js main js  gt  lt  script gt    In your build directory you will have the reference to main min js which will contain vendor js  test js  and main js

User · Answer

I have used the gulp-order plugin but it is not always successful as you can see by my stack overflow post gulp-order node module with merged streams   When browsing through the Gulp docs I came across the streamque module which has worked quite well for specifying order of in my case concatenation  https   github com gulpjs gulp blob master docs recipes using-multiple-sources-in-one-task md  Example of how I used it is below  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

User · Answer

Apparently you can pass in the  nosort  option to gulp src gulp src

User · Answer

I just add numbers to the beginning of file name   0 normalize scss 1 tikitaka scss main scss   It works in gulp without any problems

User · Answer

For me I had natualSort   and angularFileSort   in pipe which was reordering the files  I removed it and now it works fine for me    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

User · Answer

I m in a module environnement where all are core-dependents using gulp   So  the core module needs to be appended before the others    What I did    Move all the scripts to an src folder Just gulp-rename your core directory to  core gulp is keeping the order of your gulp src  my concat src looks like this   concat      client src js   js      client src js      js      client src js         js      It ll obviously take the   as the first directory from the list  natural sort     Note  angularjs   I then use gulp-angular-extender to dynamically add the modules to the core module  Compiled it looks like this   angular module  Core     ui router   mm foundation         Admin   Products      Where Admin and Products are two modules

User · Answer

In my gulp setup  I m specifying the vendor files first and then specifying the  more general  everything  second  And it successfully puts the vendor js before the other custom stuff   gulp src        vendor folder first   path join folder    vendor      js         custom js after vendor   path join folder         js

User · Answer

I had a similar problem recently with Grunt when building my AngularJS app  Here s a question I posted   What I ended up doing is to explicitly list the files in order in the grunt config  The config file will then look like this         path to app js       path to mymodule mymodule js       path to mymodule mymodule   js      Grunt is able to figure out which files are duplicates and not include them  The same technique will work with Gulp as well

[javascript] Concat scripts in order with Gulp

Update 2020

Examples related to javascript

Examples related to gulp