My gulpfile.js config

gulpfile.js

var gulp = require('gulp'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    concatenate = require('gulp-concat');

gulp.task('styles', function(){
    return gulp.src('assets/stylesheets/*.css')
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'ios 6', 'android 4'))
        .pipe(concatenate('styles.css'))
        .pipe(gulp.dest('build/assets/stylesheets'))
        .pipe(minifycss())
        .pipe(gulp.dest('build/assets/stylesheets'));
});

gulp.task('scripts', function(){
    return gulp.src('assets/scripts/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('build/assets/scripts'));
});

gulp.task('copy-files', function(){
    return gulp.src(['assets/fonts/**','assets/images/**'])
        .pipe(gulp.dest('build/assets/'));
});

gulp.task('copy-html', function(){
    return gulp.src(['**/**/*.html','!node_modules/**'])
        .pipe(gulp.dest('build/'));
});

gulp.task('watch', function(){

    gulp.watch(['**/**/*.html','!node_modules/**'], ['copy-html']);

    gulp.watch(['assets/fonts/**','assets/images/**'], ['copy-files']);

    gulp.watch('assets/stylesheets/*.css', ['styles']);

    gulp.watch('assets/scripts/*.js',['scripts']);

});

gulp.task('default', function() {
    gulp.start('copy-html', 'copy-files', 'styles', 'scripts');
});

Couple of things that I found incorrect,

Line no 29

1. Starting a path with ** is dangerous. I imagine the root directory (from where this is run) also contains the build directory which is getting copied over and over again. Try to give a more specific path. If you have multiple src paths, then you can specify each of them individually.

2. Double ** is unnecessary. A single ** also does the same thing. The following pattern rules will help you understand better,

   * - matches any number of characters, but not /.
   ? - matches a single character, but not /.
   ** - matches any number of characters, including /, as long as it's the only thing in a path part.
   {} - allows for a comma-separated list of "or" expressions.
   ! - at the beginning of a pattern will negate the match.

3. Get rid of the trailing / in the gulp.dest('build/'). Simply build is fine.

I think what you trying to do this,

gulp.task('copy-html', function() {

    gulp.src(['<dir_name>/**/*.html','!node_modules/**'])
        .pipe(gulp.dest('build'));

});

Yes. The root directory does contain the build directory.

Sometimes there are multiple files in specific folders in the root directory which contains index.html files... For eg:

 contact
    index.html
 work
    index.html
 services
    index.html

What I wanted to do is target all those folders and their containing index.html files and put it in the build folder.

Sure I can specify multiple paths and update them manually, but I wanted to automate the process.
Is that possible? Or should I just stick to manually updating the gulpfile everytime a new folder/file is added?

Ok. I know what you mean.

The problem is with the way directories are organised for your project. Your directory structure should be like this,

.
├── app
│   ├── assets
│   |   ├── stylesheets
│   |   |   └── [all *.css files]
│   |   └── scripts
│   |       └── [all *.js files]
│   ├── contact
|   |   └── index.html
│   ├── work
|   |   └── index.html
│   └── services
|   |   └── index.html
|   └── index.html
├── build
|   └── [will contain all the files processed by gulp]
├── package.json
├── gulpfile.js
└── node_modules

The trick is to wrap your entire project folder into the app directory and all the files processed by gulp into the build directory. Both the folders must lie at the same directory level.

For your question,

Is that possible? Or should I just stick to manually updating the gulpfile everytime a new folder/file is added?

It is always recommended to use a generic pattern for files keeping in mind the longevity of the project, as updating gulpfile.js everytime is a big pain. Hence, your intention is correct. So now your copy-html gulp task will look something like this,

gulp.task('copy-html', function() {

    gulp.src('app/**/*.html')
        .pipe(gulp.dest('build'));

});

• app/**/*.html will take every .html file in the app directory and all of its sub-directories into its scope.
• No need to exclude node_modules directory as it is no longer inside the app directory. Anyways project dependencies should always be outside the main project folder (app).

I see. What exactly do you mean by project dependencies? The css/js/image files?

node_module directory is known as the project dependencies that is reqd. to perform build.
css/js/img are the project assets.
gulpfile.js/package.json,_config.yml are the build configs.

There is no strict nomenclature though :). I just made up the above list on the fly.

haha! Thanks a lot. :D I might talk to you again when I start with bowerJS though.