8

Just learning Gulp. Looks great, but I can't find any information on how to make a complete distribution with it.


Let's say I want to use Gulp to concatenate and minify my CSS and JS, and optimise my images.

In doing so I change the location of JS scripts in my build directory (eg. from bower_components/jquery/dist/jquery.js to js/jquery.js).

  1. How do I automatically update my build HTML/PHP documents to reference the correct files? What is the standard way of doing this?

  2. How do I copy over the rest of my project files?. These are files that need to be included as part of the distribution, such as HTML, PHP, various txt, JSON and all sorts of other files. Surely I don't have to copy and paste those from my development directory each time I do a clean build with Gulp?


Sorry for asking what are probably very n00bish questions. It's possible I should be using something else other than Gulp to manage these, but I'm not sure where to start.

Many thanks in advance.

2 Answers 2

1

Point #1

The way i used to achieve this:

var scripts = [];
function getScriptStream(dir) { // Find it as a gulp module or create it
  var devT = new Stream.Transform({objectMode: true});
  devT._transform = function(file, unused, done) {
    scripts.push(path.relative(dir, file.path));
    this.push(file);
    done();
  };
  return devT;
}

// Bower
gulp.task('build_bower', function() {
  var jsFilter = g.filter('**/*.js');
  var ngFilter = g.filter(['!**/angular.js', '!**/angular-mocks.js']);
  return g.bowerFiles({
    paths: {
      bowerDirectory: src.vendors
    },
    includeDev: !prod
  })
    .pipe(ngFilter)
    .pipe(jsFilter)
    .pipe(g.cond(prod, g.streamify(g.concat.bind(null, 'libs.js'))))
    .pipe(getScriptStream(src.html))
    .pipe(jsFilter.restore())
    .pipe(ngFilter.restore())
    .pipe(gulp.dest(build.vendors));
});

// JavaScript
gulp.task('build_js', function() {

  return gulp.src(src.js + '/**/*.js', {buffer: buffer})
    .pipe(g.streamify(g.jshint))
    .pipe(g.streamify(g.jshint.reporter.bind(null, 'default')))
    .pipe(g.cond(prod, g.streamify(g.concat.bind(null,'app.js'))))
    .pipe(g.cond(
      prod,
      g.streamify.bind(null, g.uglify),
      g.livereload.bind(null, server)
    ))
    .pipe(gulp.dest(build.js))
    .pipe(getScriptStream(build.html));
});

// HTML
gulp.task('build_html', ['build_bower', 'build_js', 'build_views',
    'build_templates'], function() {
  fs.writeFile('scripts.json', JSON.stringify(scripts));
  return gulp.src(src.html + '/index.html'  , {buffer: true})
    .pipe(g.replace(/(^\s+)<!-- SCRIPTS -->\r?\n/m, function($, $1) {
      return $ + scripts.map(function(script) {
        return $1 + '<script type="text/javascript" src="'+script+'"></script>';
      }).join('\n') + '\n';
    }))
    .pipe(gulp.dest(build.html));
});

It has the advantages of concatenating and minifying everything for production while include every files for testing purpose keeping error line numbers coherent.

Point 2

Copying files with gulp is just as simple as doing this:

gulp.src(path).pipe(gulp.dest(buildPath));

Bonus

I generally proceed to deployment by creating a "build" branch and just cloning her in the production server. I created buildbranch for that matter:

// Publish task
gulp.task('publish', function(cb) {
  buildBranch({
    branch: 'build',
    ignore: ['.git', '.token', 'www', 'node_modules']
  }, function(err) {
    if(err) {
      throw err;
    }
    cb();
  });
});
Sign up to request clarification or add additional context in comments.

3 Comments

1. I was hoping there would be an in-built way, or plugin, as this is surely quite a common task. 2. This is only useful when you know exactly what files or file types you want to copy. Bonus. Can you point me to any documentation on buildBranch(), or is this a custom function? Thanks
Would be good to explain how to update asset paths in HTML/PHP files. Edit: Uh, I just needed to keep scrolling :/
Is this answer worked for you Mr. @tomturton? Cause I am also looking for same.
0

To loosely answer my own question, several years later:

  1. How do I automatically update my build HTML/PHP documents to reference the correct files? What is the standard way of doing this?

Always link to dist version, but ensure sourcemaps are created, so the source is easy to debug. Of course, the watch task is a must.

  1. How do I copy over the rest of my project files?. These are files that need to be included as part of the distribution, such as HTML, PHP, various txt, JSON and all sorts of other files. Surely I don't have to copy and paste those from my development directory each time I do a clean build with Gulp?

This usually isn't a problem as there aren't offer too many files. Large files and configuration are often kept out if the repo, besides.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.