Gulp for multiple projects

0 votes
675 views
added Dec 6, 2017 in Gulp by LC Marshal Captain (25,790 points)
edited Dec 6, 2017 by LC Marshal

It'll be hassle to npm i everytime you want to start your gulp projects. Not to mentioned it'll take a lot of storage space for node_modules.

Below is the hack workflow that I use for multiple projects:

|- node_modules
|- package.json
|- gulpfile.js
            find the following line, and change the name & path whenever you work on specific projects

            //The following example shows gulp to process the a project
            // /scss/a.scss == a
            // /scss/b.scss == b
            // /scss/c.scss == c

            // Please change the following line with respective project, it can be done one at time 

              var jsbuild = gulp.src(folder.src + 'js/**/*')
                  .pipe(deporder())
                  .pipe(concat('a.js'));


              return gulp.src(folder.src + 'scss/a.scss')
                .pipe(sass({
                  outputStyle: 'nested',
                  imagePath: 'images/',
                  precision: 3,
                  errLogToConsole: true
                }))

                .pipe(postcss(postCssOpts))
                // .pipe(concat('style.min.css'))
                .pipe(gulp.dest(folder.build + 'css/'));
            });
|- src/
      |- images/
      |- html
             |- a.html
             <link rel="stylesheet" type="text/css" href="../css/a.css">
             |- b.html
             <link rel="stylesheet" type="text/css" href="../css/b.css">
             |- c.html
             <link rel="stylesheet" type="text/css" href="../css/c.css">
      |- js/

          |- a.js
          |- b.js
          |- c.js
      |- scss/
            |- a
                  |- general
                  |- component
                  |- custom
            |- b
                  |- general
                  |- component
                  |- custom
            |- c
                  |- general
                  |- component
                  |- custom
            |- a.scss
            |- b.scss
            |- c.scss
|- dist/
      |- fonts/
      |- images/
      |- html
            |- a.html
            |- b.html
            |- c.html
      |- js/

            |- a.js
      |- css/
            |- a.css
            |- b.css
            |- c.css
|- static/
      |- fonts/

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...