I'm trying to get gulp to compile my SASS files and output them to the same source dir however I haven't been able to get it to work properly, I've tried using the base option:
gulp.task('sass_modules', function() {
return gulp.src('Application/modules/**/*.scss', {base: '.'})
.pipe(sassInheritance({dir: 'Application/modules/'}))
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./'));
});
With the above code, it just outputs to the app root dir, the current working directory, any ideas how I can get this to work? An example of how I want it to work is to have a Application/modules/frontend/static/css/main.scss file, and have that compiled to Application/modules/frontend/static/css/main.css and Application/modules/frontend/static/css/main.css.map.
Using this directory structure
Application
│
├─── gulpfile.js
└─┬─ modules
└─┬─ frontend
└─┬─ static
└─┬─ css
└─── main.scss
gulpfile.js
var sourcemaps = require('gulp-sourcemaps');
var sass = require('gulp-sass');
var scssFiles = 'modules/**/*.scss';
gulp.task('sass_modules', function() {
return gulp.src(scssFiles)
.pipe(sourcemaps.init())
.pipe(sass()
.on('error', sass.logError))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./'));
});
Related
I am trying to run a simple Gulp task to output css and create a source map. The conversion to css is working fine, but when I open the developer console the css is still showing as coming from style.css and not the .scss files as I would expect. I have checked the 'Enable CSS Source Maps' in the browser settings.
Here is my code:
// compile all sass files to css
gulp.task('sass', function(done){
return gulp.src('src/scss/**/*.scss') // Gets all files ending with .scss in app/scss and children dirs
.pipe(sass({outputStyle: 'expanded'})) // Converts Sass to CSS with gulp-sass
.pipe(sourcemaps.init()) // create sourcemaps
.pipe(sourcemaps.write())
.pipe(gulp.dest('app/css')) // save to the 'app' directory
done();
});
Any help greatly appreciated.
You have to initiate the sourcemap before compiling your sass:
gulp.task('sass', function() {
return gulp.src('src/scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({outputStyle: 'expanded'}))
.pipe(sourcemaps.write())
.pipe(gulp.dest('app/css'));
});
Note that with Gulp 4, you no longer need the gulp-sourcemaps package, and can instead do:
gulp.task('sass', function() {
return gulp.src('src/scss/**/*.scss', {sourcemaps: true})
.pipe(sass({outputStyle: 'expanded'}))
.pipe(gulp.dest('app/css', {sourcemaps: true}));
});
I'd like to merge all of my scss files into one compressed css file:
Structure:
stylesheets/
test.scss
test2.scss
gulpfile.js
I tried this two tasks, which I found in several answers and tutorials, but I always got the scss file into a duplicated css file:
gulp.task('sass', function() {
return gulp.src('stylesheets/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('css/'))
});
and
gulp.task('sass', function() {
return gulp.src('stylesheets/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('css/styles.css'))
});
!!! EFFECTIV RESULT !!!
stylesheets/
test.scss
test2.scss
css/
test.css
test2.css
gulpfile.js
or with second tried task:
stylesheets/
test.scss
test2.scss
css/styles.css/
test.css
test2.css
gulpfile.js
??? EXPECTED RESULT ???
stylesheets/
test.scss
test2.scss
css/
styles.css
gulpfile.js
Any ideas?
You indicated that you want to merge your files into one file and compress that file, so you need to add two plugins to do each of those.
Gulp-concat and gulp-uglify
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
gulp.task('sass', function() {
return gulp.src('stylesheets/**/*.scss')
.pipe(sass())
.pipe(concat('styles.css'))
.pipe(uglify())
// .pipe(rename({
// basename: "styles",
// suffix: ".min",
// extname: ".css"
// }))
.pipe(gulp.dest('css'))
});
In addition, you may want to add gulp-rename to indicate that the file has been uglified/minified via a .min.css extension (and change your html link to point to that filename).
Hope this hepls.
gulp.task('styles', () => {
gulp.src([path.src.sass])
.pipe(sassGlob())
.on('error', util.log)
.pipe(sass({
includePaths: ['src/scss'],
}))
.on('error', util.log)
.pipe(gulp.dest(path.dist.css))
});
I'm using a build environment with Jekyll + Gulp. So, using the gulpfile.js below, the build process generate first a dist/css folder with the compiled css inside, and then clear the entire dist folder for put the jekyll build result inside. So, i'm not able to compile the scss files inside the dist folder because every time jekyll it completely clear it.
var gulp = require('gulp');
var browserSync = require('browser-sync');
var sass = require('gulp-sass');
var child = require('child_process');
gulp.task('jekyll', function (done) {
return child.spawn('jekyll' , ['build']).on('close', done);
});
gulp.task('jekyll-rebuild', ['jekyll'], function () {
browserSync.reload();
});
gulp.task('browser-sync', ['sass', 'jekyll'], function() {
browserSync({
server: {
baseDir: 'dist'
}
});
});
gulp.task('sass', function () {
return gulp.src('src/_sass/theme.scss')
.pipe(sass({
includePaths: ['scss'],
onError: browserSync.notify
}))
.pipe(browserSync.reload({stream:true}))
.pipe(gulp.dest('dist/css'));
});
gulp.task('watch', function () {
gulp.watch('src/_sass/*.scss', ['sass']);
gulp.watch(['src/*.html', 'src/_layouts/*.html', 'src/_includes/*'], ['jekyll-rebuild']);
});
gulp.task('default', ['browser-sync', 'watch']);
I have to avoid running jekyll task in parallel with styles and scripts so I have used a runSequence.
gulp.task('build', () => {
runSequence('jekyll', ['styles', 'scripts']);
});
gulp.task('default', ['build', 'browser-sync', 'watch']);
In your Jekyll config you need to declare which folders you want to keep:
keep_files: [ css, build ]
When clobbering the site destination, keep the selected files. Useful for files that are not generated by jekyll; e.g. files or assets that are generated by your build tool. The paths are relative to the destination.
https://jekyllrb.com/docs/configuration/
I need to export my ejs templates to html files in a separate "dist" folder at the root of my project. I do have gulp-ejs installed and have the following setup in my gulpfile.js, but it is not creating the folder and compiling the html files to it:
var gulp = require('gulp'),
sass = require('gulp-sass'),
cssbeautify = require('gulp-cssbeautify'),
ejs = require('gulp-ejs');
gulp.task('styles', function(){
gulp.src('sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css/')
);
});
gulp.task('css', function(){
return gulp.src('./styles/*.css')
.pipe(cssbeautify({
indent: ' ',
openbrace: 'end-of-line',
autosemicolon: true
}))
.pipe(gulp.dest('./styles/'));
});
gulp.task('ejs', function(){
return gulp.src('./views/pages/*.ejs')<----SHOULD GRAB ALL EJS PAGES
.pipe(ejs({}, {ext:'.html'})) <-----ADD EXTENSION OF .HTML
.pipe(gulp.dest('./dist')) <-----AND EXPORT THEM TO THE DIST FOLDER
});
//Watch
gulp.task('default', function(){
gulp.watch('sass/**/*.scss',['styles','css','ejs']);
});
Also, my directory structure is as follows:
-css
-node_modules
-routes
-sass
-views
|-pages
|-about.ejs
|-index.ejs
|-partials
|-head.ejs
|-nav.ejs
-gulpfile.js
-package.json
-server.js
I think you should add another {} to ejs parameters.
ejs(data,option,settings)
gulp.task('ejs', function(){
return gulp.src('./views/pages/*.ejs')<----SHOULD GRAB ALL EJS PAGES
.pipe(ejs({},{}, {ext:'.html'})) <-----ADD EXTENSION OF .HTML
.pipe(gulp.dest('./dist')) <-----AND EXPORT THEM TO THE DIST FOLDER
});
This is how I do it and it works for me. (using gulp-ejs 3.0.0)
https://github.com/mde/ejs & https://github.com/rogeriopvl/gulp-ejs
I have a task in Gulp that compile a less file in css. I want to output the non-minify and the minify version with sourcemaps. I can't find a soluction.
This is my actual task that should do this job:
return gulp.src(['./src/less/main.less'])
.pipe(sourcemaps.init())
.pipe(less({
paths: ['node_modules'],
}))
.pipe(sourcemaps.write('.'))
.pipe(cssnano())
.pipe(rename(function (path) {
console.log(path);
path.basename = path.basename.split('.')[0] + '.min' + (path.basename.split[1] || ''); //to change the name from main.css to main.min.css
}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dist/css/'));
I get an error because cssnano want minify the map file. Can someone post his complete task with that feature?
Thank you in advance!
Something like this using 'gulp-clone' package:
var files = gulp.src(['./src/less/main.less']);
files
.pipe(clone())
.pipe(sourcemaps.init())
.pipe(less())
.pipe(cssnano())
.pipe(sourcemaps.write('.'));
files
.pipe(sourcemaps.init())
.pipe(less())
.pipe(sourcemaps.write('.'));