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

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.