Closed mcorbridge closed 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']);
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.
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;
}
}
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?
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.
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@"
}
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.
Agreed on defaulting errLogToConsole or changing the way it's done
Downgraded the version to 1.3.1 in the package.json file and it worked - the task finishes.
Sorry @mcorbridge, I meant the package.json from your project. Can the others having issues confirm the following:
Thank you.
@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
@lmartins ok ... hold on I created a new module an installed everything again Now it is working!?
// 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.
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.
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.
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
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!
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/
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?
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??