I'm trying to write a simple gulp task that takes a scss file called manifest.scss and after compiling and minifying the file it saves the result into a destination folder as app.css
The following task does almost everything I want beside renaming the file (the output is build/css/manifest.css)
gulp.task('sass', function() {
gulp.src("src/sass/manifest.scss")
.pipe(sass({ style: 'compressed' }))
.pipe(minifyCSS())
.pipe(gulp.dest('build/css'));
});
So, I have tried gulp-rename and I have update the task as follows:
gulp.task('sass', function() {
gulp.src("src/sass/manifest.scss")
.pipe(sass({ style: 'compressed' }))
.pipe(minifyCSS())
.pipe(rename('app.css'))
.pipe(gulp.dest('build/css'));
});
This produces the build/css/app.css file but it is totally blank.
How can I rename the compiled file?
Thanks
Related
I'm tryng to create a new gulp task to run into my application and look for all '.fragment.sass' files.
I wrote:
gulp.task('sassFragments', () => {
return gulp
.src('./src/**/*.fragment.sass')
.pipe(debug())
.pipe(sassGlob())
.pipe(sass({ outputStyle: 'expanded' })).on('error', sass.logError)
.pipe(concat('fragments_style.css'))
.pipe(gulp.dest('./build/assets/css'))
.pipe(browserSync.reload({ stream: true }));
})
but no fragments_style.css is created in /build/assets/css folder.
I have another task which does similar using src('./src/**/*.sass') to generate a style.css file and works great!
I think there is a issue with .src method, that is not matching this '.fragment.sass' pattern.
Can anyone help me?
Gulp version: 3.9.1
I have my scss files in a folder as below:
-themes
--theme1.scss
--theme2.scss
--theme3,scss
And my gulp task below, right now the complied css files are all in one folder inside the themes folder. How can I put the complied css file inside a folder with a different filename eg:
themes/theme1.scss => /themes/theme1/style.css
and
themes/theme2.scss => /themes/theme2/style.css
Is this possible?
gulp.task('sass-theme', function () {
return gulp.src('./assets/sass/themes/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'expanded',
}))
.on('error', sass.logError)
.pipe(sourcemaps.write())
.pipe(gulp.dest('./assets/css/themes'))
});
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've been trying to get gulp sass and gulp sourcemaps to do exactly what I want and I'm finding it hard. I want to take a sass entry file (src/sass/index.scss), generate an output file (dist/css/index.css) and a separate sourcemap for that index file (dist/css/index.css.map) which has a sourceRoot set to the project base (absolute path: /home/damon/projects/test) and the sourcemap entries to be relative to that path.
Here's what I tried:
attempt 1: straight example code from gulp-sass:
var sassEntry = 'src/sass/index.scss';
gulp.src(sassEntry)
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist/css'));
Outcome: this inlines the sourcemap into the CSS file so I can't tell if it's right or not.
attempt 2: write it to separate file
gulp.src(sassEntry)
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dist/css'));
Outcome: writes a separate sourcemap, but the sourceRoot says '/sources/' (WTF is that?!, it doesn't exist and I never configured it)
and the paths are all relative to the sass entry file, not the project base, which is also going to be meaningless when my browser tries to locate the source files.
attempt 3: try to fix the sourceroot (also I found includeContent: false)
gulp.src(sassEntry)
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('.',{includeContent: false, sourceRoot: __dirname}))
.pipe(gulp.dest('dist/css'));
Outcome: the sourceroot is now my working folder which is nice, the content isn't included which is nice, but the files in the sourcemap are still relative to the sass entry file not to the sourceRoot, so my map is still useless
attempt 4: Set the gulp.src base
gulp.src(sassEntry, { base: __dirname })
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('.',{includeContent: false, sourceRoot: __dirname}))
.pipe(gulp.dest('dist/css'));
Outcome: Infuriatingly, setting the base on gulp.src fixes the sourcemap - sourceRoot is still correct and the source file paths are relative to the sourceRoot, BUT it now outputs to dist/css/src/sass/index.css which is wrong. WTF!
attempt 5: use absolute paths
gulp.src(sassEntry, { base: __dirname })
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('.',{includeContent: false, sourceRoot: __dirname}))
.pipe(gulp.dest(__dirname + '/dist/css'));
Outcome: no change, it still outputs to the same deep structure in dist.
If anyone can enlighten me on how to do this I would be forever grateful.
While Sven's answer is perfectly good, I also found an answer to my own question by getting a deeper understanding of how gulp works (which I was trying to avoid), and apparently gulp stores each matched file with a path, so adding:
{ base: __dirname }
in the gulp.src makes it that each matched file has the full path from the base, which then causes them to output with the full relative path from wherever you set the base to. The solution I ended up with was to use gulp-flatten, which removes those relative paths from files in the pipeline, so my eventual function looked like this:
gulp.src(sassEntry, { base: __dirname })
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('.',{includeContent: false, sourceRoot: __dirname}))
.pipe(flatten())
.pipe(gulp.dest(__dirname + '/dist/css'));
easy once you understand more about what it's trying to do I guess.
Since your attempt 4 does everything you want except place the resulting files in the wrong location, the easiest fix would be to just change that location with gulp-rename after the sourcemaps have been generated:
gulp.src(sassEntry, { base: __dirname })
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('.', {includeContent: false, sourceRoot: __dirname}))
.pipe(rename({dirname:''}))
.pipe(gulp.dest('dist/css'));
I'm new to using gulp and I think I have it setup correctly, but it does not seem to be doing what it should be doing.
My gulpfile.js has
gulp.task('compass', function() {
return gulp.src('sites/default/themes/lsl_theme/sass/**/*.scss')
.pipe(compass({
config_file: 'sites/default/themes/lsl_theme/config.rb',
css: 'css',
sass: 'scss'
}))
.pipe(gulp.dest('./sites/default/themes/lsl_theme/css'))
.pipe(notify({
message: 'Compass task complete.'
}))
.pipe(livereload());
});
with
gulp.task('scripts', function() {
return gulp.src([
'sites/default/themes/lsl_theme/js/**/*.js'
])
.pipe(plumber())
.pipe(concat('lsl.js'))
.pipe(gulp.dest('sites/default/themes/lsl_theme/js'))
// .pipe(stripDebug())
.pipe(uglify('lsl.js'))
.pipe(rename('lsl.min.js'))
.pipe(gulp.dest('sites/default/themes/lsl_theme/js'))
.pipe(sourcemaps.write())
.pipe(notify({
message: 'Scripts task complete.'
}))
.pipe(filesize())
.pipe(livereload());
});
and the watch function
gulp.task('watch', function() {
livereload.listen();
gulp.watch('./sites/default/themes/lsl_theme/js/**/*.js', ['scripts']);
gulp.watch('./sites/default/themes/lsl_theme/sass/**/*.scss', ['compass']);
});
when I run gulp, the result is
[16:14:36] Starting 'compass'...
[16:14:36] Starting 'scripts'...
[16:14:36] Starting 'watch'...
[16:14:37] Finished 'watch' after 89 ms
and no changes are registered.
for file structure, my gulpfile.js is in the root directory and the sass, css, and js are all in root/sites/default/themes/lsl_theme with the sass folder containing the folder 'components' full of partials.
My assumption is that you are on windows? Correct me if I'm wrong.
There is this problem that gulp-notify tends to break the gulp.watch functions. Try commenting out
// .pipe(notify({
// message: 'Scripts task complete.'
// }))
and see if the problem still exists.
If that does fix the issue, a solution from this thread may be helpful.
You can use the gulp-if
plugin in combination with
the os node module
to determine if you are on Windows, then exclude gulp-notify, like
so:
var _if = require('gulp-if');
//...
// From https://stackoverflow.com/questions/8683895/variable-to-detect-operating-system-in-node-scripts
var isWindows = /^win/.test(require('os').platform());
//...
// use like so:
.pipe(_if(!isWindows, notify('Coffeescript compile successful')))
It turns out that a large part of my issue was just simply being a rookie with Gulp. When I removed 'scripts' from my gulp watch it started working.
I then made the connection that it was watching the same directory that it was placing the new concatenated and minified js files in so it was putting the new file, checking that file, and looping over and over causing memory issues as well as not allowing 'compass' to run.
After creating a 'dest' folder to hold the new js everything started working just peachy.