I'm using CodeAnywhere (cloud IDE) and installing gulp. Running 'gulp sass' works fine every time, but when I 'gulp watch' the 'sass' task runs fine the first time. After that it just creates an empty style.css file. I'm following the 'gulp for beginners' post on css-tricks.
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function() {
return gulp.src('src/scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('src/css'))
})
gulp.task('watch', function() {
gulp.watch('src/scss/**/*.scss', ['sass']);
})
My file structure is laid out as follows:
Related
I'm new to Gulp and was attempting to convert my Sass to CSS via a simple Gulp task.
I've tried the following (return statement):
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var uglifycss = require('gulp-uglifycss');
sass.compiler = require('node-sass');
//Compile Sass to CSS
function sass() {
return gulp.src('./assets/sass/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./assets/css'));
};
and (done)
//Complie Sass to CSS
function sass(done) {
gulp.src('./assets/sass/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./assets/css'))
done();
};
But both return with
[18:38:07] The following tasks did not complete: sass
[18:38:07] Did you forget to signal async completion?
I figured using the return statement or the done parameter would complete the task. I can't figure out why it's telling me the taks can't be completed.
I also have a very similar CSS minify task running (hence the uglify variable) that is working.
Any ideas?
Thanks!
I've come from Grunt to Gulp. Good so far but i can't seem to get the Sass errors to show on the site. Curently it stops the whole gulp task and i only get an error in Terminal
With Grunt the errors appreared immediately on the local site in a css content property. I liked this much better, much easier to use. Any ideas? Thanks.
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
gulp.task('serve', ['sass'], function() {
browserSync.init({
proxy:"dummy.com"
});
gulp.watch("craft/web/sass/*.scss", ['sass']);
gulp.watch("craft/templates/*.html").on('change', browserSync.reload);
});
gulp.task('sass', function() {
return gulp.src("craft/web/sass/*.scss")
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest("craft/web/css"))
.pipe(browserSync.stream());
});
gulp.task('default', ['serve']);
I have my sass gulp task to compile my initial css:
var input = './sass/bootstrap/*.scss';
var output = './public/css';
var sassOptions = {
lineNumbers: true
};
gulp.task('sass', function () {
return gulp
// Find all `.scss` files from the `stylesheets/` folder
.src(input)
.pipe(sourcemaps.init())
.pipe(sass(sassOptions))
.pipe(sourcemaps.write())
.pipe(gulp.dest(output));
});
Then in a seperate project I have my watch task to minify the css:
gulp.task('debug-css', function () {
gulp.src([
'assets/css/style.test.css',
'assets/css/other.css'
])
.pipe(concat('app.css'))
.pipe(cssmin())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./build/'));
livereload.listen();
gulp.watch('assets/**/*.css', function() {
gulp.src([
'assets/css/style.test.css',
'assets/css/other.css'
])
.pipe(concat('app.css'))
.pipe(cssmin())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./build/'))
.pipe(livereload());
});
});
When I use chrome dev tools, I cannot see the sass partials anywhere, Is there a way I can setup sourcemaps so I can tell which css comes from which sass file?
Everything is good with your sourcemaps, you should try to separate a bit more the gulp.task and gulp.watch you've created so avoiding to confuse yourself.
I recreated your Gulpfile, adding some more useful plugins, here is the gist:
https://gist.github.com/carlosbensant/2a3a36633a06a50dda775b2a8bde3958
Working with Sourcemaps
Said that, if you want to see the sourcemaps while you're in development stage you just have to run gulp; when you just want to deploy you're app then you should run gulp css to remove the sourcemaps into the CSS compiled (and so saving file space).
Recommendation
Try to BrowserSync, after some years using LiveReload, when I used BrowserSync the first time, I didn't get back to LiveReload, because it does a lot more than just live reloading. One of the coolest thing it does is synchronizing between multiple browsers (and platforms).
Hope that helps!
Here is my gulpfile.
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var babel = require("gulp-babel");
// Gulp Sass Task
gulp.task('sass', function () {
console.log('called');
// gulp.src locates the source files for the process.
// This globbing function tells gulp to use all files
// ending with .scss or .sass within the scss folder.
gulp.src("scss/*.scss")
// Converts Sass into CSS with Gulp Sass
.pipe(sass().on('error', sass.logError))
// Outputs CSS files in the css folder
.pipe(gulp.dest("css"));
});
// Watch scss folder for changes
gulp.task('watch', function() {
// Watches the scss folder for all .scss and .sass files
// If any file changes, run the sass task
gulp.watch('./scss/**/*.{scss,sass}', ['sass'])
});
gulp.task("transpile", function () {
return gulp.src("js/*.js")
.pipe(babel())
.pipe(gulp.dest("./compile"));
});
// Creating a default task
gulp.task('build', ['sass', 'transpile']);
gulp sass runs successfully but does not create any css folder which I am expecting. Also when I run the sass manually,
sass --trace _picker.scss:css/_picker.css
I see the css being compiled properly. Not sure what is going wrong with gulpfile. Any help would be really appreciated.
My gulpfile.js
var gulp = require('gulp');
// plugins
var sass = require('gulp-sass');
var minifycss = require('gulp-minify-css');
// compile sass
gulp.task('sass', function() {
return gulp.src('static/css/scss/main.scss')
.pipe(sass())
.pipe(minifycss())
.pipe(gulp.dest('/static/css/main.css'));
});
gulp.task('watch', function() {
gulp.watch('static/css/scss/*.scss', ['sass']);
})
gulp.task('default', ['watch']);
When I run gulp I get the following output:
[gulp] Using gulpfile /var/www/example/gulpfile.js
[gulp] Starting 'watch'...
[gulp] Finished 'watch' after 21 ms
[gulp] Starting 'default'...
[gulp] Finished 'default' after 23 μs
Then when I save my main.scss file it outputs:
[gulp] Starting 'sass'...
At which point it just hangs and never finishes. What am I doing wrong?
The return inside the sass task seemed to break it, updated my gulpfile.js to following to get it working:
var gulp = require('gulp');
// plugins
var sass = require('gulp-sass');
var minifycss = require('gulp-minify-css');
// compile sass
gulp.task('sass', function() {
gulp.src('static/css/scss/main.scss')
.pipe(sass())
.pipe(minifycss())
.pipe(gulp.dest('/static/css'));
});
gulp.task('watch', function() {
gulp.watch('static/css/scss/*.scss', ['sass']);
})
gulp.task('default', ['watch']);
For anyone else who has this issue, I managed to fix this by removing circular imports.
For example...
Before:
file1.scss
#import 'file2';
file2.scss
#import 'file1';
After:
file1.scss
<removed import>
file2.scss
#import 'file1';
I didn't actually need the circular dependency, I was just copying/pasting dependencies to the tops of all my scss files.Note that if your files actually need to import one another you'd either need to refactor your files in such a way that you avoid circular dependencies.
The reason my sass compilation was not working and the gulp process was hanging and pinging my processor was that I had an old reference in my .scss file but I had removed the file. There was never any output that complained - this was hard to track down - I got lucky.
#import 'file-that-has-been-removed-but-still-referenced';