'use strict'
const gulp = require('gulp'),
sass = require('gulp-sass'),
sourceMap = require("gulp-sourcemaps");
gulp.task('sassToCss', ()=>{
return gulp.src("scss/application.scss")
.pipe(sourceMap.init())
.pipe(sass())
.pipe(sourceMap.write('./'))
.pipe(gulp.dest('css'));
});
gulp.task('watchFile', ()=>{
gulp.watch('scss/**/*.scss', ['sassToCss']);
});
when I use (gulp sassToCss) it always work.But when i start (gulp watchFile) and
edit some file in sass folder it's sometime work and sometime not. and which file i change it's give the error that this file can't find.enter image description here
Related
I am pretty new at Gulp (v.4.0.2), so I can't understand is there any kind of cache mechanism inside it (at least I can't find such a piece of information on Google). After running my "gulp" command styles.css file being created, but if I do changes in SASS file and the try to run the same command again I won't get a new generated file. I tried to delete styles.css file and run the command again - the file was generated, but with the old content. I can even see that the modification date of the generated file is being left from the old file.
My gulpfile.js:
const gulp = require('gulp');
const sass = require('gulp-sass');
const cssnano = require('gulp-cssnano');
const del = require('del');
gulp.task('styles', () => {
return gulp.src('app/sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(cssnano())
.pipe(gulp.dest('app/css'));
});
gulp.task('clean', () => {
return del([
'app/css/styles.css',
]);
});
gulp.task('default', gulp.series(['clean', 'styles']));
I am trying to streamline my workflow and include templating. I installed Nunjucks and tried to set it up so whenever I save a change to a template file gulp watch will fire the nunjucks function and refresh my browser.(firefoxdeveloperedition)
It works at first, but then my browser stops reloading the changes. Every time I save the browser will refresh but the changes do not appear. Here is my gulpfile(i removed the other tasks from this but keep the requirements in so you can see the modules i have installed)
/* Module Requirements */
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var useref = require('gulp-useref');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var imagemin = require('gulp-imagemin');
var nunjucksRender = require('gulp-nunjucks-render');
/* //Module Requirements */
//Compile sass into css
gulp.task('sass', function(){
return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss and children dirs
.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('nunjucks', function() {
// Gets .html and .nunjucks files in pages
return gulp.src('app/pages/**/*.+(html|nunjucks)')
// Renders template with nunjucks
.pipe(nunjucksRender({
path: ['app/templates']
}))
// output files in app folder
.pipe(gulp.dest('app'))
});
//Watch for changes in sass and html and update browser.
gulp.task('watch', ['browserSync', 'sass', 'nunjucks'], function (){
gulp.watch('app/scss/**/*.scss', ['sass']);
gulp.watch('app/templates/**/*.+(html|nunjucks)', ['nunjucks']);
gulp.watch('app/*.html', browserSync.reload);
gulp.watch('app/js/**/*.js', browserSync.reload);
// Other watchers
});
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: 'app'
},
browser: ['firefoxdeveloperedition']
})
})
Is my code wrong?
EDIT: After some more testing it actually seems to be tied to Firefox Developer Edition...
I cant create output.css file in root directory via gulp .. I want output compressed one file with stylesheet, but the gulp doesnt work them.
I have this structure
- bower_components
- bootstrap
- sass
- custom.scss
- output.css
my gulp file:
var gulp = require('gulp'),
sass = require('gulp-sass'),
watch = require('gulp-watch');
var concat = require('gulp-concat');
gulp.task('scss', function () {
return gulp.src('bower_components/bootstrap/scss/_custom.scss')
.pipe(sass({outputStyle: 'compressed'}))
.pipe(concat('output.css'))
.pipe(gulp.dest('./'));
});
gulp.task('watch', function () {
gulp.watch('bower_components/bootstrap/scss/_custom.scss', ['scss']);
});
gulp.task('default', ['watch']);
You forgot to include the 'scss' task in your default task.
gulp.task('default', ['scss', 'watch']);
I've got the following code to concatenate and minify my .css files :
var gulp = require('gulp'),
concatCSS = require('gulp-concat-css'),
minifyCSS = require('gulp-minify-css'),
rename = require('gulp-rename'),
notify = require('gulp-notify'),
browserSync = require('browser-sync').create(),
reload = browserSync.reload,
autoprefixer = require('gulp-autoprefixer');
//Concat CSS
gulp.task('concat', function () {
return gulp.src('css/*.css')
.pipe(concatCSS('css/bundle.css'))
.pipe(rename('bundle.min.css'))
.pipe(minifyCSS('bundle.min.css'))
.pipe(gulp.dest('out/'));
});
//Watch HTML and reload
gulp.task('serve', function () {
// Serve files from the root of this project
browserSync.init({
server: {
baseDir: "./app"
}
});
browserSync.watch("app/*.html").on("change", reload);
});
//Default
gulp.task('default', ['serve', 'concat']);
Although Terminal shows no errors the code for concatenation and minifying is not working.
What should I fix to solve the issue?
The structure of my project:
UPD!
In my case there were some syntactic mistakes in .css files. Works well after correcting them and removing minifyCSS since it's no longer supported.
I want to compile my scss file using gulp but it doesn't output anything. Here is my task:
var gulp = require('gulp'),
sass = require('gulp-ruby-sass');
gulp.task('styles', function(){
return
gulp.src('scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('css/'));
});
When I run, everything works fine but my css folder is empty.
Has anyone encountered the same issue?
A bit of potential semi-colon insertion (you should read your code as if there was a semi-colon after return, i.e. you should not let it float on its own on one line), and a bit of different gulp-ruby-sass syntax, perhaps? Here's what works for me:
"use strict";
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
gulp.task('default', [], function() {
return sass('scss/*.scss')
.pipe(gulp.dest('css/style.css'));
});