I have a scss folder I'm watching. I'm including all partials into main.scss and I'd like the generated file to be named style.css
Below is a portion of my gulpfile.js
const rename = require("gulp-rename");
const files = {
scssPath: './src/scss/**/*.scss',
jsPath: 'src/js/**/*.js'
}
function scssTask() {
return src(files.scssPath)
.pipe(sass())
.pipe(rename('style.css'))
.pipe(postcss([ autoprefixer(), cssnano()]))
.pipe(dest('web/assets/css'));
}
// default
exports.default = series(
parallel(scssTask, jsTask),
watchTask
);
The rename part doesn't seem to have any affect. The file gets generated into main.css
Sure, I could just rename my main.scss to style.scss, but I like having "main" for the sass files and "style" for the generated file the browser will use
Also, here's my main.scss file:
#import 'utilities/variables';
#import 'base/normalize';
#import 'base/typography';
Related
I need to combine some HTML files with the CSS that resides in the same directory using Gulp. The file structure of my project is as follows.
- src
- dir1
- index.html
- style.css
- dir2
- index.html
- style.css
- dir3
- index.html
- style.css
So, I'm combining the HTML and CSS from dir1, then the HTML and CSS from dir2, and so on.
I've tried to do this several ways (including the following) but can't get anything to work the way I want.
.pipe(replace('<link rel="stylesheet" href="style.css">', function (match, p1) {
return '<style>' + fs.readFileSync('src/' + p1, 'utf8') + '</style>';
}))
Is there an easy way to reference relative files in Gulp?
I assume you are using gulp 4 and gulp-replace, and that your gulpfile.js is located in the project directory, next to the src subdirectory.
Then the task consists of three steps:
read the index.html files
replace the string <link rel="stylesheet" href="style.css"> with a <style> tag with the contents of the file style.css in the same directory as index.html.
write the changed index.html files to a new destination directory.
Steps 1 and 3 are easy to accomplish with gulp.src and gulp.dist, so let's look at step 2. Each style.css (the file we want to read) resides in the same directory as index.html. That directory can be retrieved with this.file.dirname in the gulp-replace callback. If we append "style.css" to that directory, we will get a full path to a CSS file that can be read with readFileSync. The rest is pretty straightforward:
const { readFileSync } = require('fs');
const gulp = require('gulp');
const replace = require('gulp-replace');
const { join } = require('path');
exports.default = () =>
gulp.src('src/**/index.html')
.pipe(replace('<link rel="stylesheet" href="style.css">', function () {
const stylePath = join(this.file.dirname, 'style.css');
const style = readFileSync(stylePath);
return `<style>${style}</style>`;
}))
.pipe(gulp.dest('dest'));
I really think that the only unobvious part in this process is getting the directory of each index.html/style.css file pair in the gulp-replace callback as this.file.dirname. Here, according to gulp-replace:
The value of this.file will be equal to the vinyl instance for the file being processed.
and file.dirname for a vinyl file
Gets and sets the dirname of file.path. Will always be normalized and have trailing separators removed.
I am using Gulp to compile my bootstrap.less file into a bootstrap.css file. All the bootstrap LESS files are in a "less" folder and all of the CSS files are in a CSS folder. All of the bootstrap less files are #import'd into bootstrap.less and then that file is compiled to bootstrap.css. However I have one custom.less file that is in the bootstrap LESS folder. I would like to compile into a custom.css file in the CSS folder. I cannot get Gulp to do this. Here is my code.
var gulp = require('gulp');
var less = require('gulp-less');
var browserSync = require('browser-sync').create();
gulp.task('less', function() {
return gulp.src(['./less/bootstrap.less', './less/custom.less'])
.pipe(less())
.pipe(gulp.dest("./css"))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('serve', function(){
browserSync.init({
server: {
baseDir: './'
}
});
gulp.watch('./less/*.less', ['less']);
gulp.watch(['./**/*.html', './js/custom.js']).on('change',
browserSync.reload);
});
gulp.task( 'default', ['less', 'serve']);
What I usually do is compile all .less or .scss files into css folder. You will end up with a few empty files (a good example would be .less files that contain variables) but on the other hand you can create a gulp task to clear those files out. I use the following code to compile:
return gulp.src("Styles/scss/*.scss")
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest("Styles/css"))
.pipe(reload({stream: true}));
I'm also generating sourcemaps here but you can remove that. If you would like to discover more checkout this post here
Hope this helps ;)
I have wanted to delete two folders inside the folder 'dest' so I did
gulp.task('del', function () {
// add task
return gulp.src('./app/static/dest', {read: false})
.pipe(clean());
});
Under dest folder, there are js and css folder and inside them there are js and css files respectively. When I run gulp, it deletes js folder and files successfully but does not delete the css files. What is the problem?
By the way the default task function is:
gulp.task('default', ['del'], function() {
gulp.start('transform');
gulp.start('styles');
gulp.watch('./app/static/src/js/*.js', ['transform'])
gulp.watch('./app/static/src/css/*.scss', ['styles'])
});
I would like to create a resources.zip file which will contain css/styles.css.
So far I have got most of this working, the only problem is the archive only contains the styles.css file and not its parent directory css.
gulpfile.js
const gulp = require('gulp');
const zip = require('gulp-zip');
gulp.task('default', () => {
return gulp.src('css/*')
.pipe(zip('resources.zip'))
.pipe(gulp.dest('build'));
});
I think you need to setup the base for the gulp.src:
gulp.src('css/*', {base: '.'})
This is because the default base is:
Default: everything before a glob starts (see glob2base)
source. Zipped file path: zip.
I am having an issue with my gulp build file with the sass imports.
I am using gulp-importify to create a build.scss file that has the proper order of my dependencies, third party css, and my custom css.
The Importify task
module.exports = function() {
APP.gulp.src(APP.concat.sass)
.pipe(APP.tasks.importify('build.scss', {
cssPreproc: 'scss'
}))
.pipe(APP.gulp.dest('build/sass/'));
};
My folder structure is as follows:
gulp
- bower_components
- build
- sass
- build.scss
- modules
-forms.scss
The build.scss file which contains the imports has the following paths
#import "_bootstrap-sprockets";
#import "variables.scss";
#import "modules/form.scss";
but the bower components are back two directories.
#import "../../bower-components/bootstrap-sass/assets/stylesheets/_bootstrap-sprockets";
#import "variables.scss";
#import "modules/form.scss";
is there any other way or method to setting the full relative/correct import path in Gulp?
I found the solution. I added a base path through gulp.src as follows:
module.exports = function() {
APP.gulp.src(APP.concat.sass,
{base: 'build/sass'})
.pipe(APP.tasks.imports('build/sass/build.scss', {
cssPreproc: 'scss'
}))
.pipe(APP.gulp.dest('.'));
};
You can also use the global process object available in Node to get the current working directory. So you can set the base to:
{base: process.cwd() }