Gulp-sass: simply does not work?

[mcorbridge]

I am running gulp-htmlmin in conjunction with gulp-sass to prove that gulp WILL create a new directory with the minimized html. Gulp-sass does NOT create a directory of css, nor does it create the new directory as specified in the gulp task. Any reason why??

[mcorbridge]

here is my gulpfile:

var gulp = require('gulp');

var htmlmin = require('gulp-htmlmin');
var sass = require('gulp-sass');

gulp.task('minify', function() {
    return gulp.src('src/*.html')
        .pipe(htmlmin({collapseWhitespace: true}))
        .pipe(gulp.dest('dist'))
});

gulp.task('sass', function () {
    return gulp.src('scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('css'));
});

gulp.task('default', ['minify','sass']);

[lmartins]

Please provide a sample of your sass too.

Sent from my iPhone

On 23/03/2015, at 13:02, michael corbridge [email protected] wrote:

here is my gulpfile:
var gulp = require('gulp');

var htmlmin = require('gulp-htmlmin');
var sass = require('gulp-sass');

gulp.task('minify', function() {
return gulp.src('src/*.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest('dist'))
});

gulp.task('sass', function () {
return gulp.src('scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('css'));
});

gulp.task('default', ['minify','sass']);

—
Reply to this email directly or view it on GitHub.

[mcorbridge]

main.scss
(thank you lmartins!)

nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    li { display: inline-block; }

    a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
    }
}

[mcorbridge]

here is the output in the terminal:

C:\development\test\qqq\chrome>gulp
[09:49:06] Using gulpfile C:\development\test\qqq\chrome\gulpfile.js
[09:49:06] Starting 'minify'...
[09:49:06] Starting 'sass'...
[09:49:06] Finished 'minify' after 55 ms

note that 'sass' never finishes?

[lmartins]

That's really weird @mcorbridge
I've replicated your environment on my local machine, except that im using OS X and not windows.
By copy/pasting your code and running gulp-sass I get the expected behaviour:

The file open in the screenshot was generated by the sass task.

Im not really sure what might going on. Can you please also provide the contents of your package.json file please.

[mcorbridge]

here is the package.json from node-sass (readme was removed for clarity)

{
  "name": "gulp-sass",
  "version": "1.3.3",
  "description": "Gulp plugin for sass",
  "main": "index.js",
  "scripts": {
    "test": "node test/test.js"
  },
  "repository": {
    "type": "git",
    "url": "git://github.com/dlmanning/gulp-sass"
  },
  "keywords": [
    "gulpplugin",
    "sass",
    "gulp"
  ],
  "author": {
    "name": "David Manning"
  },
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/dlmanning/gulp-sass/issues"
  },
  "dependencies": {
    "clone": "~0.1.18",
    "gulp-util": "^3.0",
    "map-stream": "~0.1",
    "node-sass": "^2.0.1",
    "vinyl-sourcemaps-apply": "~0.1.1"
  },
  "devDependencies": {
    "tape": "~2.3",
    "concat-stream": "~1.4"
  },
  "jshintConfig": {
    "laxcomma": true
  },
  "readmeFilename": "README.md",
  "_id": "[email protected]",
  "_from": "gulp-sass@"
}

[lachezar]

Hi,

I have the same issue.
Running on Ubuntu with node v0.10.13.
I have tried with node-sass version 3.0.0.alpha and 2.0.1.

It seems like node-sass works just fine outside gulp (tried few examples), but the gulp task does not finish.
The gulp file is this one (task copy:css) - https://github.com/jakearchibald/svgomg/blob/master/gulpfile.js

I wanted to try out this sample project but I could not compile it correct and it took me a lot of time to figure out that there is an error, since there is no output to the terminal and the status code is 0. I think it will be good idea to keep errLogToConsole: true as default.

[Keats]

Agreed on defaulting errLogToConsole or changing the way it's done

[lachezar]

Downgraded the version to 1.3.1 in the package.json file and it worked - the task finishes.

[lmartins]

Sorry @mcorbridge, I meant the package.json from your project.
Can the others having issues confirm the following:

• Which gulp-sass version (current is 1.3.3)
• Which gulp version (current is 3.8.11)
• Which OS

Thank you.

[mcorbridge]

@lmartins
my apologies for the delay ... here it is
(I should add that I am a complete Gulp noob)

{
"name": "chrome",
"version": "0.0.0",
"description": "",
"main": "gulpfile.js",
"dependencies": {
"gulp": "~3.8.11",
"gulp-htmlmin": "~1.1.1",
"gulp-sass": "~1.3.3",
"gulp-scss-lint": "~0.1.10",
"gulp-css-scss": "~0.0.2",
"node-sass": "~3.0.0-alpha.0"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "[email protected]",
"license": "BSD"
}

---

OS: win7 pro

[mcorbridge]

@lmartins
ok ... hold on
I created a new module an installed everything again
Now it is working!?

gulpfile.js

// include gulp
var gulp = require('gulp');

// include plug-ins
var jshint = require('gulp-jshint');
var minifyHTML = require('gulp-minify-html');
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
var concat = require('gulp-concat');
var sass = require('gulp-sass');

// JS hint task
gulp.task('jshint', function() {
gulp.src('./src/scripts/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});

// CSS concat, auto-prefix and minify
gulp.task('styles', function() {
gulp.src(['./src/styles/css/*.css'])
.pipe(concat('styles.css'))
.pipe(autoprefix('last 2 versions'))
.pipe(minifyCSS())
.pipe(gulp.dest('./build/styles/css'));
});

// minify new or changed HTML pages
gulp.task('htmlpage', function() {
var htmlSrc = './src/html/*.html',
htmlDst = './build/html';

gulp.src(htmlSrc)
    .pipe(minifyHTML())
    .pipe(gulp.dest(htmlDst));

});

// Compile Our Sass
gulp.task('sass', function () {
return gulp.src('./src/styles/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./build/styles/css'));
});

// default gulp task
gulp.task('default', ['styles', 'htmlpage','sass'], function() {

// watch for CSS changes
gulp.watch('./src/styles/css/*.css', function() {
    gulp.run('styles');
});

// watch for HTML changes
gulp.watch('./src/html/*.html', function() {
    gulp.run('htmlpage');
});

// watch for HTML changes
gulp.watch('./src/styles/scss/*.scss', function() {
    gulp.run('sass');
});

});

package.json

---

{
"name": "senators",
"version": "0.0.0",
"description": "",
"main": "gulpfile.js",
"dependencies": {
"gulp-changed": "~1.2.1",
"gulp-imagemin": "~2.2.1",
"gulp": "~3.8.11",
"gulp-jshint": "~1.9.4"
},
"devDependencies": {
"gulp-sass": "~1.3.3",
"gulp-minify-html": "~1.0.1",
"gulp-autoprefixer": "~2.1.0",
"gulp-minify-css": "~1.0.0",
"gulp-concat": "~2.5.2"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "BSD"
}

---

Please let me know if this helps anyone, or if I can shed any light on the problem for other people.

[lmartins]

My guess is something went wrong with the npm install at the first time.
Can the others having issues please try to remove node_modules and run npm install again to see if solves your issue.

Keep an eye on the log to see if any error pops up while installing the npm modules.

[elliottregan]

I had a very similar problem when I upgraded to Node v0.12.1 where the gulp task would finish, but there was no output CSS file. gulp-debug showed the parent Sass file going in, 1 file going out, but nothing got saved. Maybe another debug tool would have given more info, but I stopped there.

After trying to find the right combination of package versions, I just upgraded every package, and it seems to have worked. Still not sure if it was node-sass, gulp-sass, or one of their dependencies that was causing the issues, though.

[Keats]

You can also try the 2.x branch of gulp-sass which should work better.
But yeah, probably an error during npm install, it's quite easy to miss sometimes

[FlawaCLV]

Same problem for me. Doesn't prompt any error... After trying every possible combination of package versions, I seriously don't know where to look for!

[nth-commit]

Same here. Doesn't even output an error when I purposely screw up the syntax in the source scss files on purpose. Doing the most simple gulp-sass possible.

Edit:

I'm an idiot. New to SASS from LESS and had prefixed my test file with "_" as I thought that was convention... If anyone has any problems just add gulp.run("sass") - or whatever you task name is - to you gulpfile. Then,

npm install -g node-inspector
node-debug gulpfile.js

Oh well, I learnt a lot about gulp today. And I found out VS2015 uses a separate installation of node, which was another roadblock: http://ryanhayes.net/synchronize-node-js-install-version-with-visual-studio-2015/

[Sri276286]

Can anyone please explain why gulp-sass is outputing .css files instead of .scss files after minification.
what fix needs to be done to get .scss files after minification?

[brizer]

remove node_modules ,then npm istall again. it works. but who know reasons?