dlmanning / gulp-sass

SASS plugin for gulp
MIT License
1.57k stars 381 forks source link

simply does not work? #218

Closed mcorbridge closed 9 years ago

mcorbridge commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

Please provide a sample of your sass too.

Sent from my iPhone

On 23/03/2015, at 13:02, michael corbridge notifications@github.com 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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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:

screen shot 2015-03-23 at 13 59 56

screen shot 2015-03-23 at 13 59 04

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 commented 9 years ago

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": "gulp-sass@1.3.3",
  "_from": "gulp-sass@"
}
lachezar commented 9 years ago

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 commented 9 years ago

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

lachezar commented 9 years ago

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

lmartins commented 9 years ago

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

Thank you.

mcorbridge commented 9 years ago

@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": "mikecorbridge@gmail.com", "license": "BSD" }


OS: win7 pro

mcorbridge commented 9 years ago

@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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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?