I want to compile my scss file using gulp but it doesn't output anything. Here is my task:
var gulp = require('gulp'),
sass = require('gulp-ruby-sass');
gulp.task('styles', function(){
return
gulp.src('scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('css/'));
});
When I run, everything works fine but my css folder is empty.
Has anyone encountered the same issue?
A bit of potential semi-colon insertion (you should read your code as if there was a semi-colon after return, i.e. you should not let it float on its own on one line), and a bit of different gulp-ruby-sass syntax, perhaps? Here's what works for me:
"use strict";
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
gulp.task('default', [], function() {
return sass('scss/*.scss')
.pipe(gulp.dest('css/style.css'));
});
Related
Gulp-livereload is giving me an error when I save a change to my .scss files. My gulpfile.js has been working fine for years and just started giving me trouble a little while ago. The scss gets compiled to css and livereload tries to reload the page, but I get the following error (photo attached: https://i.stack.imgur.com/o57el.png). When I manually reload the page the error goes away and the style changes are reflected. Also, if I make changes to other files (i.e. HTML or JavaScript) everything works just fine.
It may also be worth mentioning, I am using MAMP to create a local Apache server, so I don't think I can make use of something else like browsersync. Any help would be much appreciated, thank you!
Here is what my gulpfile.js looks like.
'use strict';
var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var sass = require('gulp-sass');
var livereload = require('gulp-livereload');
gulp.task('sass', function () {
return gulp.src('./styles/sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass.sync().on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./styles/css'))
.pipe(livereload());
});
gulp.task('html', function() {
return gulp.src('./**/*.html')
.pipe(livereload());
});
gulp.task('js', function() {
return gulp.src('./js/*.js')
.pipe(livereload());
});
gulp.task('watch', function () {
livereload.listen();
gulp.watch('./styles/sass/**/*.scss', gulp.series('sass'));
gulp.watch('./*.html', gulp.series('html'));
gulp.watch('./js/*.js', gulp.series('js'));
});
'use strict'
const gulp = require('gulp'),
sass = require('gulp-sass'),
sourceMap = require("gulp-sourcemaps");
gulp.task('sassToCss', ()=>{
return gulp.src("scss/application.scss")
.pipe(sourceMap.init())
.pipe(sass())
.pipe(sourceMap.write('./'))
.pipe(gulp.dest('css'));
});
gulp.task('watchFile', ()=>{
gulp.watch('scss/**/*.scss', ['sassToCss']);
});
when I use (gulp sassToCss) it always work.But when i start (gulp watchFile) and
edit some file in sass folder it's sometime work and sometime not. and which file i change it's give the error that this file can't find.enter image description here
showing me this error don't know how to resolve it.
my gulpfile.js code is as follow
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
sass = require('gulp-ruby-sass');
gulp.task('default', function(){
gulp.src('js/*.js')
.pipe(uglify())
.pipe(gulp.dest('minjs'));
});
//style task
gulp.task('styles', function(){
gulp.src('scss/**/*.scss')
.pipe(sass())
.pip(gulp.dest('css/'));
});
If this hasn't been resolved there is a spelling mistake in the styles task. On the last line it says:
pip(gulp.dest('css/'));
I assume this needs to be:
pipe(gulp.dest('css/'));
Give that a try :)
Your gulp task would probably work with gulp-sass but you're using gulp-ruby-sass which isn't the same. Note the gulp-ruby-sass documentation:
gulp.task('sass', () =>
sass('source/file.scss') // not .pipe(sass())
.on('error', sass.logError)
.pipe(gulp.dest('result'))
);
I have been playing with gulp and babel for the past few days. I am getting a solid grasp of setting up babel with gulp through tutorials. I've noticed that the newer the tutorial the more changes that develop.
Here is one way I was able to set up es6 to es5 with a transpiler.
var gulp = require('gulp');
var babel = require('gulp-babel');
gulp.task('es6to5', function () {
return gulp.src('js/src/app.js')
.pipe(babel())
.pipe(gulp.dest('dist'));
});
However, I do not want to rerun gulp each time, and I want the dist/ folder to update on each save.
I added browser-sync and delete.
var gulp = require('gulp');
var babel = require('gulp-babel');
var browserSync = require('browser-sync');
var del = require('del');
gulp.task('clean:dist', function() {
return del([
'dist/app.js'
]);
});
gulp.task('es6to5', function () {
return gulp.src('js/src/app.js')
.pipe(babel())
.pipe(gulp.dest('dist'));
});
gulp.task("browserSync", function() {
browserSync({
server: {
baseDir: './dist'
}
});
});
gulp.task("copyIndex", ['clean:dist'], function() {
gulp.src("src/index.html")
.pipe(gulp.dest('./dist'))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('watchFiles', function() {
gulp.watch('src/index.html', ['copyIndex']);
gulp.watch('src/**/*.js', ['babelIt']);
});
gulp.task('default', ['clean:dist', 'es6to5','browserSync','watchFiles']);
I set up a default that will clean out the dist folder then run es6to5. Afterwards I want it to sync and update. I called watchFiles last.
However, I am no longer getting updated js files. The files in the dist folder Are not compiling to es5 and everything is going to a 404.
The task
copyIndex seems to be the problem but I am not sure how to fix it or if it is the only problem. Any direction helps.
You have a typo.
It should be gulp.watch('src/**/*.js', ['es6to5']);, not gulp.watch('src/**/*.js', ['babelIt']);
Anyway i suggest to use gulp-watch instead of the built-in watch function. It has several advantages, mainly it recompile on new file creation.
I am trying to switch from gulp-sass to gulp-scss however surprisinly its not working for me. I have checkedin my code in following Git Hub.
https://github.com/dilipkumar2k6/gulp-sass
"gulp sass" is working because its using gulp-sass module. However "gulp scss" is not working because its using "gulp-scss". Following is my gulp task.
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var scss = require("gulp-scss");
gulp.task('sass', function () {
gulp.src('./src/application/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./dist/sass'));
});
gulp.task("scss", function () {
gulp.src(
"./src/application/**/*.scss"
).pipe(scss(
{"bundleExec": true}
)).pipe(gulp.dest('./dist/scss'));
});
Is there any specific reason why you have to use gulp-scss?
You don't have to use gulp-scss module in order to compile your .scss files.
gulp-scss is a bit unpopular, you should stick to gulp-sass module and in your code specify ".pipe(sass())" - it will compile either .scss or .sass files down to .css files