Based on the gulb file of foundation 6.4 I compile my sass files.
The goal is to compile the app.css and a backend.css and a rte.css
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var autoprefixer = require('autoprefixer');
var sassPaths = [
'node_modules/foundation-sites/scss',
'node_modules/motion-ui/src'
];
function sass() {
return gulp.src('scss/app.scss')
.pipe($.sass({
includePaths: sassPaths
}).pipe(gulp.dest('css'));
};
function rte() {
return gulp.src('scss/Rte.Default.scss')
.pipe($.sass({
includePaths: sassPaths
}).pipe(gulp.dest('css'));
};
function backend() {
console.log('Backend\n');
return gulp.src('scss/Custom.Backend.scss')
.pipe($.sass({
includePaths: sassPaths
})
.pipe(gulp.dest('css'));
};
function serve() {
gulp.watch("scss/**/*.scss", sass);
};
// define the tasks
gulp.task('sass', sass);
gulp.task('rte', rte);
gulp.task('backend', backend);
gulp.task('serve', serve);
gulp.task('default', gulp.series([sass, rte, backend, serve]));
unfortunately I can compile app, rte, backend each on its own (commenting out the other tasks), but I can't compile all of them an once.
I only get "app.css", but not the other files.
I am a little bit lost in the gulp/references, tryed certain "similar" scripts/hints/tips - but I atways fail.
Do you know? I am sure you do!
Thank you for any help!
Here is an issue with this code:
function sass() {
return gulp.src('scss/app.scss')
.pipe($.sass({
includePaths: sassPaths
}).pipe(gulp.dest('css')); // problem here
};
It is a little obscured because of your style but you are missing a )
})).pipe(gulp.dest('css')); // correct
and same in other tasks.
Related
Browsersync stream is not working for me.
I've copied example from official documentation and it won't working. Reloading for html and js files working fine. Only sass streaming wouldn't work. I've read all the issues on github and can't find an answer for my question.
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var useref = require('gulp-useref');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var cssnano = require('gulp-cssnano');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
var del = require('del');
var runSequence = require('run-sequence');
// Development Tasks
// -----------------
gulp.task('serve', ['sass'], function() {
browserSync.init({
server: {
baseDir: "./app",
index: 'index.html'
}
});
gulp.watch('app/styles/*.scss', ['sass']);
gulp.watch("app/*.html").on('change', browserSync.reload);
gulp.watch('app/pages/*.html').on('change', browserSync.reload);
gulp.watch('app/js/**/*.js').on('change', browserSync.reload);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
return gulp.src('app/styles/*.scss'). // Gets all files ending with .scss in app/scss and children dirs
pipe(sass().on('error', sass.logError)). // Passes it through a gulp-sass, log errors to console
pipe(gulp.dest('app/css')). // Outputs it in the css folder
pipe(browserSync.stream());
})
// Build Sequences
// ---------------
gulp.task('default', function(callback) {
runSequence([
'sass', 'serve'
], callback)
})
gulp.task('build', function(callback) {
runSequence('clean:dist', 'sass', [
'useref', 'images', 'fonts'
], callback)
})
I would make three quick changes to see if they help. First
const browserSync = require("browser-sync").create();
Note the create() at the end, you need that. Second, simplify this:
gulp.task('default', function(callback) {
runSequence([
'sass', 'serve'
], callback)
})
to:
gulp.task('default', ['serve']);
Your 'serve' task calls the 'sass' task first anyway so you don't need the renSequence stuff. Finally, change:
pipe(browserSync.stream());
to:
pipe(browserSync.reload({stream:true}));
I would also make this change:
gulp.watch('app/js/**/*.js').on('change', browserSync.reload(stream:true}));
Gulp sass/gulp watch command is unable to override the already existing/generated .css file.
So when there is no generated css file in the folder, the command works fine. But, if the file exists on the folder I am getting below error.
[12:17:39] Error: EPERM: operation not permitted, open 'C:\My folder\project\components\site-products\demo\app\css\style.css'
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
return gulp.src('./demo/app/scss/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./demo/app/css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./demo/app/scss/**/*.scss', ['sass']);
});
Not sure its relevant but I am not using gulp-compass. I am using node-sass instead.
Thanks in advance for help.
Resolved it finally, it was because webpack was locking files.
Used gulp-chmod to bypass it :)
Here is the final script:
var gulp = require('gulp');
var sass = require('gulp-sass');
var chmod = require('gulp-chmod');
gulp.task('sass', function () {
return gulp.src('./demo/app/scss/**/*.scss')
.pipe(chmod(0o755))
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(gulp.dest('./dist/demo/css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./demo/app/scss/**/*.scss', ['sass']);
});
I got the same and resolved by using gulp cache control.
I don't understand why, but it works!
For you, it would be something like that:
var cache = require('gulp-cached');
gulp.task('cache:docsource', function(){
return gulp.src('./demo/app/**/*.*').pipe(cache('cacheDocSource'));
});
gulp.task('sass', function () {
return gulp.src('./demo/app/scss/**/*.scss')
.pipe(cache('cacheDocSource'))
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(gulp.dest('./dist/demo/css'));
});
gulp.task('sass:watch', ['cache:docsource'], function () {
gulp.watch('./demo/app/scss/**/*.scss', ['sass']);
});
You can use the clean task:
// Path
var paths = {
scss: {
input: 'dev/assets/scss/**/*.{scss,sass}',
output: 'public/assets/css'
}
};
// SCSS
gulp.task('scss', function() {
return sass(paths.scss.input)
.pipe(autoprefixer('last 2 version'))
.pipe(cssnano())
.pipe(gulp.dest(paths.scss.output))
.pipe(browserSync.reload({stream: true}));
});
// Clean
gulp.task('clean', function() {
return del(['public/**/*']);
});
// Default
gulp.task('default', ['clean'], function() {
gulp.start('scss');
});
var gulp = require('gulp');
var requireDir = require('require-dir');
var path = require('path');
var $ = require('gulp-load-plugins')({pattern:['gulp-*','gulp.*']});
gulp.task('sass', function() {
var scriptsPath = './';
gulp.src(path.join(scriptsPath, '/src/sass/**/*.scss'))
.pipe($.sourcemaps.init())
.pipe($.sass({
includePaths: [
path.join(scriptsPath, '/src/sass/'),
'bower_components/bourbon/app/assets/stylesheets',
'bower_components/neat/app/assets/stylesheets'
],
outputStyle: "compressed"
}).on('error', $.sass.logError))
.pipe($.sourcemaps.write('./'))
.pipe(gulp.dest('website/static/css/'));
});
gulp.task('build', ['build-js-libs', 'sass']);
If I enter any bad css in the .scss files no error is being shown in the terminal on a build - have I done something wrong with what I am using above? Any help would be much appreciated
I didn't test this, but would outputting the error to console.log work?
...
}).on('error', function(err) {
console.log(err);
})
...
You can also use gulp-plumber before the sass-function. That would log the error to the console
...
.pipe($.sourcemaps.init())
.pipe($.plumber())
.pipe($.sass({
...
I'm setup as outlined below. The good news: styles are being compiled, the bad news: gulp doesn't seem to watch the scss files for a change and compile automatically?
// Include gulp
var gulp = require('gulp');
// Plugins
var concat = require('gulp-concat');
var stripDebug = require('gulp-strip-debug');
var uglify = require('gulp-uglify');
var include = require('gulp-include');
var sass = require('gulp-sass');
var minifycss = require('gulp-minify-css');
// Styles
gulp.task('styles', function() {
gulp.src('./_themes/blanktheme/ui/scss/styles.scss')
.pipe(include())
.pipe(sass({
errLogToConsole: true
}))
.pipe(minifycss())
.pipe(gulp.dest('./_themes/blanktheme/ui/css/'))
});
// Watch
gulp.task('default', ['watch'], function() {
gulp.watch('./_themes/blanktheme/ui/scss/*.scss', ['styles']);
});
gulp.task('default', ['styles', 'watch']);
I think this come from the fact you have two tasks default. I guess gulp ignore the first one (with gulp.watch) to only trigger the second one. Then you have dependencies with watch but seems like watch does not exist ?
You can install gulp-watch locally, and include it in your file. Give a look at gulp-watch documentation it might help.
Try this :D
var watch = require('gulp-watch');
// Styles
gulp.task('styles', function() {
gulp.src('./_themes/blanktheme/ui/scss/styles.scss')
.pipe(include())
.pipe(sass({
errLogToConsole: true
}))
.pipe(minifycss())
.pipe(gulp.dest('./_themes/blanktheme/ui/css/'))
});
// Watch
gulp.task('watch', function() {
watch('./_themes/blanktheme/ui/scss/*.scss', function () {
gulp.start('styles');
});
});
gulp.task('default', ['styles', 'watch']);
I have this Gulp task in my 'gulpfile.js' which utilises the gulp-ruby-sass plugin. When I run it, it tasks at least 8 seconds to compile. The equivalent script in Grunt can take less than 1 second so I am confused as to what is causing the lag.
'use strict';
var gulp = require('gulp');
var minifyCSS = require('gulp-minify-css');
// Load plugins
var plugins = require('gulp-load-plugins')();
var path = {
src: function (path) {
return './assets/' + path;
},
dist: function (path) {
return './web/' + path;
},
};
// Styles
gulp.task('styles', function () {
return gulp.src(path.src('styles/**/*.scss'))
.pipe(plugins.rubySass({sourcemap: false, style: 'expanded', quiet: true }))
.pipe(plugins.autoprefixer('last 2 versions', '> 1%', 'ie 8'))
.pipe(gulp.dest(path.src('styles')))
.pipe(minifyCSS())
.pipe(plugins.rename({suffix: '.min'}))
.pipe(gulp.dest(path.dist('styles')))
.pipe(plugins.size());
});
I swapped out gulp-ruby-sass for gulp-sass and I can now compile in under a second. Marvellous!