title: Merge multiple scss files into one css file
body: <p>I'd like to merge all of my <code>scss</code> files into one compressed <code>css</code> file:</p>
  
  <p>Structure:</p>
  
  <ul>
  <li>stylesheets/</li>
  <li><ul>
  <li>test.scss</li>
  </ul></li>
  <li><ul>
  <li>test2.scss</li>
  </ul></li>
  <li>gulpfile.js</li>
  </ul>
  
  <p>I tried this two tasks, which I found in several answers and tutorials, but I always got the <code>scss</code> file into a duplicated <code>css</code> file:</p>
  
  <pre><code>gulp.task('sass', function() {
      return gulp.src('stylesheets/**/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('css/'))
  });
  </code></pre>
  
  <p>and</p>
  
  <pre><code>gulp.task('sass', function() {
      return gulp.src('stylesheets/**/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('css/styles.css'))
  });
  </code></pre>
  
  <p><strong>!!! EFFECTIV RESULT !!!</strong></p>
  
  <ul>
  <li>stylesheets/</li>
  <li><ul>
  <li>test.scss</li>
  </ul></li>
  <li><ul>
  <li>test2.scss</li>
  </ul></li>
  <li>css/</li>
  <li><ul>
  <li>test.css</li>
  </ul></li>
  <li><ul>
  <li>test2.css</li>
  </ul></li>
  <li>gulpfile.js</li>
  </ul>
  
  <p><strong>or with second tried task:</strong></p>
  
  <ul>
  <li>stylesheets/</li>
  <li><ul>
  <li>test.scss</li>
  </ul></li>
  <li><ul>
  <li>test2.scss</li>
  </ul></li>
  <li>css/styles.css/</li>
  <li><ul>
  <li>test.css</li>
  </ul></li>
  <li><ul>
  <li>test2.css</li>
  </ul></li>
  <li>gulpfile.js</li>
  </ul>
  
  <p><strong>??? EXPECTED RESULT ???</strong></p>
  
  <ul>
  <li>stylesheets/</li>
  <li><ul>
  <li>test.scss</li>
  </ul></li>
  <li><ul>
  <li>test2.scss</li>
  </ul></li>
  <li>css/</li>
  <li><ul>
  <li>styles.css</li>
  </ul></li>
  <li>gulpfile.js</li>
  </ul>
  
  <p>Any ideas?</p>