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.
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
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')
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"))
});
I just started to use Gulp. This code is used to compress a scss file to css. I can't figure out how to keep one of the css files uncompressed.
This is what I want it to be:
/assets/css/custom.css
/assets/css/custom.min.css
Code:
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('styles', function() {
gulp.src('assets/scss/custom.scss')
.pipe(sass({outputStyle: 'compressed'}))
.pipe(gulp.dest('./assets/css/'));
});
gulp.task('default',function() {
gulp.watch('assets/scss/**/*.scss',['styles']);
});
What you could do is expand your task so that it writes out the uncompressed version, then compresses it, renames it, then finally writes it out again.
var gulp = require('gulp');
var sass = require('gulp-sass');
var rename = require('gulp-rename');
gulp.task('styles', function() {
gulp.src('assets/scss/custom.scss')
.pipe(sass())
.pipe(gulp.dest('./assets/css/'))
.pipe(sass({outputStyle: 'compressed'}))
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest('./assets/css/'));
});
Note that you'll need to add the gulp-rename plugin to your dependencies. You could also use a dedicated minifier (such as gulp-minify-css) rather than the SASS plugin to minify your CSS.
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.