I am using GULP to compile my scss files and trying trying to compile it down into a single styles.css file. However when I run gulp sass it converts the scss files down to css but also replicates them instead of compiling them all down into one single file.
gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('sass', function () {
return gulp.src('./src/sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass.sync({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./src/css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./src/sass/**/*.scss', ['sass']);
});
file structure
--gulpfile.js
--src
--css
--sass
--themes
--module.scss
--tm-1.scss
--styles.scss
when i run gulp sass the css output ends up being:
--css
--styles.css
--themes
--module.css
--tm-1.css
which all I want here is one single styles.css file and cant seem to understand what I'm missing here.
I have fixed the issue by changing the line
return gulp.src('./src/sass/**/*.scss')
to:
return gulp.src('./src/sass/styles.scss')
Related
I am very new to gulp and sass, but trying to create a gulpfile that will take and scss file and turn it into a css file (this seems like it is a very common thing that lots of people do). I am following along this tutorial - https://youtu.be/nusgoj74a3Y?t=1301 - but it seems to be a bit outdated.
My directory looks like this
-xxx
--gulpfile
--src
---Assets
----scss
-----default.scss
----css
My gulpfile looks like this:
'use strict';
//dependencies
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var changed = require('gulp-changed');
//////////////////
// - SCSS/CSS - //
//////////////////
var SCSS_SRC = './src/Assets/scss/**/*.scss';
var SCSS_DEST = './src/Assets/css';
//compile css
gulp.task('compile_scss', function(){
gulp.src(SCSS_SRC)
.pipe(sass().on('error', sass.logError))
.pipe(minifyCSS())
.pipe(rename({ suffix: '.min' }))
.pipe(changed(SCSS_DEST))
.pipe(gulp.dest(SCSS_DEST));
});
//detect changes in SCSS
gulp.task('watch_scss', function() {
return gulp.watch(SCSS_SRC, gulp.series('compile_scss'));
});
//run tasks
gulp.task('default', gulp.series('watch_scss'));
and when I run it I get this:
[20:39:12] Using gulpfile ~/xxx/xxx/xxx/xxx/gulpfile.js
[20:39:12] Starting 'default'...
[20:39:12] Starting 'watch_scss'...
I believe it is supposed to finish these tasks not just start them.
Also I believe it is supposed to take the scss file from the scss directory and then put a css file in the css directory which it does not do.
Any help would be great. Thanks.
you are triggering a watch there, try modifying any of your scss files, and watch the terminal transpile to CSS ;)
you could add alternatively something like
gulp.task('getCSS', gulp.series('compile_scss'));
and then run gulp getCSS to get the CSS
Good morning,
My task created at gulpfile.js is following:
const gulp = require('gulp');
const sass = require('gulp-sass');
gulp.task('sass', function(){
return gulp.src('sass/*.scss')
.pipe(sass())
.pipe(gulp.dest('../assets/css/'));
});
when I try to run gulp sass I am getting this info:
Starting 'sass'...
Finished 'sass' after 20 ms
and my css file is not creating (I have obviously created scss file before).
What may be the reason of my issue?
Remove the underscore from the name of scss file. Underscores are for partials. Also, / is root directory and ./ is for the current directory. Read this
Update your Gulpfile.js:
const gulp = require('gulp');
const sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('./sass/*.scss')
.pipe(sass())
.pipe(gulp.dest('./../assets/css'));
});
I am trying to use gulp to convert the scss to css. I am making changes in the scss and nothing is changing in the css. Anyone any ideas on this ? Thanks
My file structure is this :
index.html
app/scss/styles.scss
app/css/styles.css
file structure image
And my gulp file contains this :
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function(){
return gulp.src('app/scss/styles.scss')
.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(gulp.dest('app/css'))
});
gulp.task("watch", function() {
gulp.watch("app/scss/**/*.scss", ['sass']);
});
Change the path of the files and dest to the following
gulp.task("sass", function () {
return gulp
.src("./app/scss/styles.scss")
.pipe(sass())
.pipe(gulp.dest("./app/css"))
});
Using gulp-sass automatically calls the file that is compiled to css style.css. Does anyone know how this filename can be modified? i.e. so I can change it to style2.css
Please see gulpfile.js below.
var gulp = require('gulp'),
sass = require('gulp-sass');
gulp.task('sass', function () {
return gulp
.src('./dev/style.scss')
.pipe(sass())
.pipe(gulp.dest('./prod/css'));
});
gulp.task('default', ['sass']);
Try gulp-rename - looks pretty easy.
I have following task which compiles *.scss files to scc, minifies them and concatenates to one css file.
gulp.task("scss-to-css", ["clean-css"], function () {
return gulp.src(pathToScssFiles)
.pipe(sass())
.pipe(minifyCss({}))
.pipe(concat("app.min.css"))
.pipe(gulp.dest(contentDir));
});
Is it possible to add sourcemap from app.min.css to *.scss files?
I recommend for using the gulp-ruby-sass module instead of gulp-sass.
When I tried to make source map like you, I failed to get the source map of original each scss file. So I'm looking for other way, the below gulpfile code seemed to be better.
var gulp = require('gulp');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
var minifyCss = require('gulp-minify-css');
//var sass = require('gulp-sass');
var sass = require('gulp-ruby-sass');
gulp.task('scss-to-css', function() {
return sass('scss/*.scss', { sourcemap: true })
.pipe(sourcemaps.write())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(minifyCss({}))
.pipe(sourcemaps.init({loadMaps: true}))
.pipe( concat("app.min.css"))
.pipe(sourcemaps.write())
.pipe(gulp.dest( './build' ));
});
gulp.task('default', ['scss-to-css']);
Before you run gulp, gem install sass is required.
Please refer to the github example repo.