1

I am trying to integrate gulp into my current workflow and website. I'm running into a problem because the folder structure is complex. For example:

-dev
    index.html
    -images/
    -lib/
        -js/
        -scss/
    -app1/
        index.html
        -images/
        -lib/
            -js/
    -app2/
        index.html
        -images/
        -lib/
            -js/
    -app3/
        index.html
        -images/
        -lib/
            -js/

Each app has its own html and images, and the root /dev does too. It is structured this way for organization and because each app is unique but they share vendor and global" files in /dev/lib/js and all the css files come from /dev/lib/scss.

The output to a dist/ folder should be:

-dist
    index.html
    -images/
    -js/ (from /dev/lib/js)
        global.min.js (concat/uglify/rename)
    -css/ (from /dev/lib/scss)
    -app1/
        index.html
        -images/
        -js/
            app1.min.js (concat/uglify/rename all files from /dev/app1/lib/js)
    -app2/
        index.html
        -images/
        -js/
            app2.min.js (concat/uglify/rename all files from /dev/app2/lib/js)
    -app3/
        index.html
        -images/
        -js/
            app3.min.js (concat/uglify/rename all files from /dev/app3/lib/js)

So basically, the lib/JS files in each app get processed (concat/uglify/rename) and put into the same structure on dist, but in a js/ folder instead. So...(/dev/app1/lib/js > /dist/app1/js). Also, the root lib files do the same. So...(/dev/lib/js > /dist/js). Also, the scss files in /dev/lib/scss should go to /dist/css.

I've done a lot of searching, but I haven't had any luck finding anything related to this. Some examples, but just not helpful enough to get this right.

On top of all that, I want to make sure I copy any new images and HTML into their respective app structure as well.

Any help would be amazing, thanks everyone!

ksumarine
  • 782
  • 2
  • 12
  • 33
  • 1
    Hey earlier this year I solved a similar problem. It requires some discipline and overall design to the build system. I wrote about it here: https://medium.com/@limdauto/design-an-orthogonal-build-system-with-gulp-for-fun-profit-8b0a9dc8ab37 -- let me know what you think – Lim H. Oct 03 '15 at 19:20
  • @LimH. Wow, that looks pretty good. I'll test it out this week and then mark this as the answer. Seems to be a great solution though. Great article! – ksumarine Oct 03 '15 at 21:11
  • let me know how it goes. All the code in there is a bit crude. I need to update that with a rea example project. But earlier this year I moved 100k lines of code with this approach and it works without a glitch – Lim H. Oct 03 '15 at 21:15
  • That's great. You explain it well so I get the idea completely. I would like to implement a watch somehow too. So depending on which app you're working on, it will only process those files on a save. – ksumarine Oct 03 '15 at 21:19
  • Exactly that's what I did. And if the lib change, rebuild the whole thing. – Lim H. Oct 03 '15 at 21:21
  • How would you process files in the root, overall app directory? Would you need a task.js file in the root directory? If so, how do you reference it within the gulpfile.js which is also in the root directory. – ksumarine Oct 05 '15 at 17:53
  • Do you mind setting up an example project somewhere? I can submit PR if you want. But you may want to take a look at this: http://stackoverflow.com/questions/9874382/whats-the-difference-between-process-cwd-vs-dirname – Lim H. Oct 06 '15 at 08:22

0 Answers0