When assigning a css directory, the gulp.dest folder get's ignored.

[chriscodeweb]

Hello,

I can't seem to use the gulp.dest folder after I used the compas command.
I noticed, when I leave the css folder out, the gulp dest folder still get's ignored. But then
a css folder gets created in the same folder as the gulpfile.js.

What do I need to change to make the gulp.dest work? Because the .pipe(minifyCSS()) methods
does nothing because the compass does not return the streaming data.

var gulp = require('gulp'),
gutil = require('gulp-util'),
browserify = require('gulp-browserify'),
compass = require('gulp-compass'),
minifyCSS = require('gulp-minify-css'),
path = require('path');
concat = require('gulp-concat');


gulp.task('log', function() {
   gutil.log('Start Gulp logging..');
});

gulp.task('compass', function() {
    gulp.src('*.scss')
        .pipe(compass({
            sass: '../../import/app/styles', //the location where the sass files are 
            css : '../../public_html/main/styles/css/', //css destination
            style: 'expanded' 
        }))
        .on('error', gutil.log)
        .pipe(minifyCSS())
        .pipe(gulp.dest('../../public_html/main/styles/css/'));
});

[mvattuone]

+1, this problem has suddenly emerged in a project I hadn't worked on for about a week.

My task:

gulp.task('sass', function() {
    gulp.src('./src/components/style.scss')  
        .pipe(compass({  
          'sass': 'src/components',  
        }))  
       .pipe(gulp.dest('dist'))  
       .on('error', errorAlert)  
});

Should go to:

app
- dist
-- style.css

But instead goes in the top app directory, in app/css/style.css

Updating npm didn't seem to do anything -- I will try to debug further but I'm not entirely sure the best course of action for doing so.

[appleboy]

Hi @mvattuone

I try your config. It is working for me. Compass will output css temp file in css folder and move css files to your dist folder.

var gulp = require('gulp');
var compass = require('gulp-compass');
var minifyCSS = require('gulp-minify-css');

gulp.task('default', function() {
  gulp.src('src/components/style.scss')
    .pipe(compass({
      sass: 'src/components/'
    }))
    .pipe(minifyCSS())
    .pipe(gulp.dest('dist'))
    .on('error', console.log)
});

Initial project:

and run gulp command.

[mvattuone]

Oh ha, you are correct -- did the temp CSS directory get deleted in previous versions? I can add the directory to .gitignore but seems kind of unnecessary after the build completes and I think that was confusing me before.

Thanks @appleboy!

[lzl124631x]

@chriscodeweb I guess, to make the minifying work, you need to assign the correct path to .scss files rather than gulp.src('*.scss').

[eylon-uk]

Hi

I'm new to gulp and compass so I might have done something wrong but trying to configure a gulp workflow I've encountered a problem similar to the one that's discussed here.
the changes that I make in the sass file gets updated only in the upper css folder but not in the builds folder to which I'm referring as .dest. this my project structure:
Project/
Builds
Development
Css (do not get updated)
Js
Images
Production
Css (do not get updated)
Js
Components
Sass
Scripts
Css (gets updated)

My gulpfile.js:

`var gulp = require('gulp'),
gulpUtil = require('gulp-util'),
gulpConcat = require('gulp-concat'),
gulpBrowserify = require('gulp-browserify'),
gulpCompass = require('gulp-compass'),
connect = require('gulp-connect');

var env,
jsSources,
sassSources,
htmlSources,
jsonSources,
outputDir,
sassStyle;

env = process.env.NODE_ENV || 'development';

if (env==='Development') {
outputDir = 'Builds/Development/';
sassStyle = 'expanded';
} else {
outputDir = 'Builds/Production/';
sassStyle = 'compressed';
}

jsSources = [
'Components/Scripts/guzi1.js',
'Components/Scripts/guzi_mustache.js'
];
sassSources = ['Components/Sass/style.scss'];
htmlSources = [outputDir + '.html'];
jsonSources = [outputDir + 'js/.json'];

gulp.task('js', function () {
gulp.src(jsSources)
.pipe(gulpConcat('guzi_master.js'))
.pipe(gulpBrowserify())
.pipe(gulp.dest(outputDir + 'js'))
.pipe(connect.reload())
});

gulp.task('html', function () {
gulp.src(htmlSources)
.pipe(connect.reload())
});

gulp.task('json', function () {
gulp.src(jsonSources)
.pipe(connect.reload())
});

gulp.task('compass', function () {
gulp.src(sassSources)
.pipe(gulpCompass({
sass: 'Components/Sass',
image: outputDir + 'images',
style: sassStyle
})
.on('error', gulpUtil.log))
.pipe(gulp.dest(outputDir + 'css'))
.pipe(connect.reload())
});

gulp.task('watch', function () {
gulp.watch(jsSources, ['js']);
gulp.watch('Components/Sass/*.scss', ['compass']);
gulp.watch(htmlSources, ['html']);
gulp.watch(jsonSources, ['json'] );
});

gulp.task('connect', function () {
connect.server({
root: outputDir,
livereload: true
});
});

gulp.task('default', ['html', 'json', 'js', 'compass', 'watch', 'connect']);`

My package.json:

{ "name": "guzi", "version": "0.0.1", "description": "Guzi's website", "main": "index.js", "repository": { "type": "git", "url": "?.git" }, "author": "eylon", "devDependencies": { "compass": "^0.1.1", "gulp": "^3.9.1", "gulp-browserify": "^0.5.1", "gulp-compass": "^2.1.0", "gulp-concat": "^2.6.0", "gulp-connect": "^3.2.2", "gulp-ruby-sass": "^2.0.6", "gulp-util": "^3.0.7", "jquery": "^2.2.3", "mustache": "^2.2.1" }, "license": "MIT" }