title: Gulp - build files with custom folders
body: <p>I'm creating a workflow to build custom e-mail templates. In my folder, I have this structure:</p>
  
  <pre class="lang-html prettyprint-override"><code>folder/
      templates/
          template-001.html
          image-001.jpg
      images/
          image-default.jpg
      src/
          style.scss
  </code></pre>
  
  <p>I'm using <code>gulp-inline-css</code> to get the compile css file and insert all the styles inline in the file <code>template-001.html</code>. Then, the task gets all these files and put inside a <code>build</code> folder. Like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>folder/
      templates/
          template-001.html
          image-001.jpg
      images/
          image-default.jpg
      src/
          style.scss
      build/
          template-001.html
          image-default.jpg
          image-001.jpg
  </code></pre>
  
  <p>This is ok for an individual project. But I want to be able to build several templates and organize the files the proper way. I would like to have a folder structure like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>folder/
      templates/
          template-001/
              template-001.html
              image-001.jpg
      images/
          image-default.jpg
      src/
          style.scss
      build/
          template-001/
              template-001.html
              image-default.jpg
              image-001.jpg
  </code></pre>
  
  <p>In other words, I want to be able to get the folder of the <code>template-001.html</code> and reproduce it in the <code>build</code> folder. With my current setup, I don't know how to make it possible.</p>
  
  <p>Here's my <code>gulpfile.js</code>:</p>
  
  <pre><code>var gulp = require( 'gulp' ),
          sass = require( 'gulp-sass' ),
          autoprefixer = require( 'gulp-autoprefixer' ),
          minifycss = require( 'gulp-minify-css' ),
          imagemin = require( 'gulp-imagemin' ),
          rename = require( 'gulp-rename' ),
          concat = require( 'gulp-concat' ),
          plumber = require( 'gulp-plumber' ),
          notify = require( 'gulp-notify' ),
          inlineCss = require('gulp-inline-css'),
          projectTitle = 'E-mail Templates';
  
  // styles task
  gulp.task( 'styles', function() {
      return gulp.src( 'src/*.scss' )
          .pipe( plumber() )
          .pipe( sass({ paths: ['src/'] }) )
          .pipe( notify( {
          title: projectTitle,
          message: 'File: &lt;%= file.relative %&gt; was compiled!'
          } ) )
          .pipe( autoprefixer( 'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4' ) )
          .pipe( gulp.dest( 'src/' ) )
          .pipe( notify( {
          title: projectTitle,
          message: 'Minified file: &lt;%= file.relative %&gt; was created / updated!'
          } ) )
  
          console.log( '&lt;%= file %&gt;' );
  } );
  
  // styles task
  gulp.task( 'html-build', function() {
      return gulp.src( 'templates/**/*.html' )
          .pipe( inlineCss({
                  applyStyleTags: false,
                  applyLinkTags: true,
                  removeStyleTags: false,
                  removeLinkTags: true
          }) )
          .pipe( gulp.dest('build/') )
          .pipe( notify( {
          title: projectTitle,
          message: 'Template File: &lt;%= file.relative %&gt; was created / updated!'
          } ) )
  } );
  
  // images task
  gulp.task( 'images', function() {
      return gulp.src( 'images/**/*' )
          .pipe( plumber() )
          .pipe( imagemin({ optimizationLevel: 7, progressive: true, interlaced: true }) )
          .pipe( gulp.dest( 'build/' ) )
          .pipe( notify( {
          title: projectTitle,
          message: 'Image: &lt;%= file.relative %&gt; was optimized!'
          } ) )
  } );
  
  // watch task
  gulp.task( 'watch', [ 'styles' ], function() {
  
      // Watch .scss files
      gulp.watch( 'src/**/*.scss', [ 'styles', 'html-build' ] );
  
      // Watch .html files
      gulp.watch( 'templates/**/*.html', [ 'html-build' ] );
  
      // Watch image files
      gulp.watch('images/**/*', ['images'] );
  
  });
  </code></pre>
  
  <p>Any tips or advices about hot to make it possible? Thanks!</p>