I try to add a second sass 'cycle' to my ionic project. Here is the relevant part of my gulpfile.js
var paths = {
sass: ['./scss/**/*.scss'],
themesass: ['./www/data/theme/css/**/*.scss']
};
gulp.task('default', ['sass','themesass']);
gulp.task('sass', function(done) {
gulp.src('./scss/ionic.app.scss')
.pipe(sass())
.on('error', sass.logError)
.pipe(gulp.dest('./www/css/'))
.pipe(minifyCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest('./www/css/'))
.on('end', done);
});
gulp.task('themesass', function(done) {
gulp.src('./www/data/theme/css/style.scss')
.pipe(sass())
.on('error', sass.logError)
.pipe(gulp.dest('./www/data/theme/css/'))
.pipe(minifyCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest('./www/data/theme/css/'))
.on('end', done);
});
gulp.task('watch', function() {
gulp.watch(paths.sass, ['sass']);
gulp.watch(paths.themesass, ['themesass']);
});
On changing style.css I get following output in terminal:
File changed: www/data/theme/css/style.scss
[12:07:03] Starting 'themesass'...
[12:07:03] Finished 'themesass' after 14 ms
CSS changed: www/data/theme/css/style.css
CSS changed: www/data/theme/css/style.min.css
Both files (style.css and style.min.css) stay empty though. What am I missing?
Related
I'm new to Gulp,
this Gulp setting is already rendered 'main.scss' but I want to add 1 more scss file named 'styles.scss' into this Gulp but kinda stuck.
How can I insert this new scss ?
should I create a new task for new scss? well, I did but it seems that I'm doing it the wrong way.
how to add it in the correct way?
<pre><code>
"use strict";
var gulp = require('gulp'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
sass = require('gulp-sass'),
maps = require('gulp-sourcemaps'),
del = require('del'),
autoprefixer = require('gulp-autoprefixer'),
browserSync = require('browser-sync').create(),
htmlreplace = require('gulp-html-replace'),
cssmin = require('gulp-cssmin');
gulp.task("concatScripts", function() {
return gulp.src([
'assets/js/vendor/jquery-3.2.1.slim.min.js',
'assets/js/vendor/popper.min.js',
'assets/js/vendor/bootstrap.min.js',
'assets/js/functions.js'
])
.pipe(maps.init())
.pipe(concat('main.js'))
.pipe(maps.write('./'))
.pipe(gulp.dest('assets/js'))
.pipe(browserSync.stream());
});
gulp.task("minifyScripts", ["concatScripts"], function() {
return gulp.src("assets/js/main.js")
.pipe(uglify())
.pipe(rename('main.min.js'))
.pipe(gulp.dest('dist/assets/js'));
});
gulp.task('compileSass', function() {
return gulp.src("assets/css/main.scss")
.pipe(maps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer())
.pipe(maps.write('./'))
.pipe(gulp.dest('assets/css'))
.pipe(browserSync.stream());
});
gulp.task("minifyCss", ["compileSass"], function() {
return gulp.src("assets/css/main.css")
.pipe(cssmin())
.pipe(rename('main.min.css'))
.pipe(gulp.dest('dist/assets/css'));
});
gulp.task('watchFiles', function() {
gulp.watch('assets/css/**/*.scss', ['compileSass']);
gulp.watch('assets/js/*.js', ['concatScripts']);
})
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./"
}
});
});
gulp.task('clean', function() {
del(['dist', 'assets/css/main.css*', 'assets/js/main*.js*']);
});
gulp.task('renameSources', function() {
return gulp.src(['*.html', '*.php'])
.pipe(htmlreplace({
'js': 'assets/js/main.min.js',
'css': 'assets/css/main.min.css'
}))
.pipe(gulp.dest('dist/'));
});
gulp.task("build", ['minifyScripts', 'minifyCss'], function() {
return gulp.src(['*.html', '*.php', 'favicon.ico',
"assets/img/**", "assets/fonts/**"], { base: './'})
.pipe(gulp.dest('dist'));
});
gulp.task('serve', ['watchFiles'], function(){
browserSync.init({
server: "./"
});
gulp.watch("assets/css/**/*.scss", ['watchFiles']);
gulp.watch(['*.html', '*.php']).on('change', browserSync.reload);
});
gulp.task("default", ["clean", 'build'], function() {
gulp.start('renameSources');
});
</code></pre>
Any help really appreciated. Thanks
Assuming styles.scss is in the same folder as main.scss:
gulp.task('compileSass', function() {
// src changed so that all .scss files in folder are used
return gulp.src("assets/css/*.scss")
.pipe(maps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer())
.pipe(maps.write('./'))
.pipe(gulp.dest('assets/css'))
.pipe(browserSync.stream());
});
gulp.task("minifyCss", ["compileSass"], function() {
// same as above : gulp.src takes a glob of all .css files in css folder
return gulp.src("assets/css/*.css")
.pipe(cssmin())
// name each file with the suffix, rest of name will be same as before
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('dist/assets/css'));
});
gulp.task('clean', function() {
// changed css item so all .css files are deleted
del(['dist', 'assets/css/*.css*', 'assets/js/main*.js*']);
});
I'm beginner with Foundation and Sass. I understand slowly how it works. The workflow seems great, but here's my "issue".
When my SCSS is compiled, my CSS minifies as soon as I save my .scss file.
I've tried to turn off the Gulp task, but it didn't do anything.
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var sassPaths = [
'bower_components/normalize.scss/sass',
'bower_components/foundation-sites/scss',
'bower_components/motion-ui/src'
];
gulp.task('sass', function() {
return gulp.src('scss/*.scss')
.pipe($.sass({
includePaths: sassPaths,
// outputStyle: 'compressed'
})
.on('error', $.sass.logError))
.pipe($.autoprefixer({
browsers: ['last 2 versions', 'ie >= 9']
}))
.pipe(gulp.dest('css'));
});
gulp.task('default', ['sass'], function() {
gulp.watch(['scss/**/*.scss'], ['sass']);
});
Any ideas?
From looking at your task their shouldn't be any part of it that is minifying your css. A couple of things you could try:
1) Try outputStyle: 'expanded'
2) Try compiling your sass without including any of the bower sass files, as one of them could already be minified (although unlikely). Or even just check those manually.
3) Or finally try this configuration:
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var sassPaths = [
'bower_components/normalize.scss/sass',
'bower_components/foundation-sites/scss',
'bower_components/motion-ui/src',
'scss/*.scss'
];
gulp.task('sass', function() {
return gulp.src(sassPaths)
.pipe($.sass({
outputStyle: 'expanded'
})
.on('error', $.sass.logError))
.pipe($.autoprefixer({
browsers: ['last 2 versions', 'ie >= 9']
}))
.pipe(gulp.dest('css'));
});
gulp.task('default', ['sass'], function() {
gulp.watch(['scss/**/*.scss'], ['sass']);
});
I try to use sourcemaps for my scss files. But when I inspect an element in the browser, the sourcemap points to a wrong file. I can't find what is causing this issue.
gulp.task('sass', function(){
return gulp.src('./themes/custom/' + project + '/scss/style.scss')
.pipe(sourcemaps.init())
.pipe(sass({
includePaths: [
bourbon,
config.bowerDir + '/bootstrap-sass/assets/stylesheets',
config.bowerDir + '/font-awesome/scss'
],
style: 'compressed',
quiet: true,
}).on('error', function (err) {
sass.logError(err);
this.emit('end');
}))
.pipe(concat('style.css'))
.pipe(cleanCSS())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./themes/custom/' + project + '/css'))
});
I'm trying to make Gulp compile my sass files. It sees changes in main.sass file but if I #import files it doesn't see changes in them unless I restart gulp.
Here is my gulpfile
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
browserSync = require('browser-sync').create(),
jade = require('gulp-jade');
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir:'./'
}
});
});
// Compiling SASS to CSS
gulp.task('styles', function () {
return sass('assets/sass/main.sass')
.on('error', sass.logError)
.pipe(autoprefixer({
browsers: ['last 3 versions','> 5%'],
cascade: false
}))
.pipe(gulp.dest('assets/css/'))
.pipe(browserSync.stream());
});
//HTML
gulp.task('templates', function() {
var YOUR_LOCALS = {};
gulp.src('./*.jade')
.pipe(jade({
locals: YOUR_LOCALS,
pretty: true
}))
.pipe(gulp.dest('./'))
});
//Default task
gulp.task('default', ['styles', 'watch', 'browser-sync', 'templates']);
gulp.task('watch', function(){
gulp.watch('*.html').on('change', browserSync.reload);
gulp.watch('*.jade').on('change', browserSync.reload);
gulp.watch('*.css').on('change', browserSync.reload);
gulp.watch('assets/sass/main.sass', ['styles']);
gulp.watch('*.jade', ['templates']);
})
And these is the structure of my project
You're only watching for changes to assets/sass/main.sass. You need to watch for changes to any .sass file below assets/sass:
gulp.watch('assets/sass/**/*.sass', ['styles']);
Instead of:
gulp.watch('assets/sass/main.sass', ['styles']);
Sass with .sass files,
Here is my gulpfile,
var gulp = require('gulp'),
sass = require('gulp-sass'),
connect = require('gulp-connect');
connect.server({port: 8000, livereload: true});
function exceptionLog (error) {
console.log(error.toString());
this.emit('end');
}
gulp.task('sass', function () {
gulp.src('sass/*.sass')
.pipe(sass({
outputStyle: 'expanded',
}))
.on('error', exceptionLog)
.pipe(gulp.dest('css'))
.on('error', exceptionLog)
.pipe(sass.sync().on('error', sass.logError));
});
gulp.task('reload', function () {
gulp.src('*.html')
.pipe(connect.reload())
.on('error', exceptionLog);
});
gulp.task('default', function() {
gulp.watch(['*.html'],['reload']);
gulp.watch('**/*.sass', ['sass','reload']);
});
This setup works well for .scss files, while now on this project, I have to stick with .sass, Gulp setup with this gulpfile does not breaks or display any errors (but compiles if no errors). but only the correct syntax will be compiled. while if change to .scss, it logs the errors.
You need to attach the error event listener to the sass stream, not your gulp stream or later in the stream when the error has already been thrown. Also, use the built in logError function to log errors:
.pipe(sass().on('error', sass.logError))
Full example:
gulp.task('sass', function () {
return gulp.src('sass/*.sass')
.pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
.pipe(gulp.dest('css'))
.on('error', exceptionLog);
}