I want to take advantage of running autoprefixer after compass watches for changes to my scss files and update the css file with the autoprefixed code, but I'm stuck. I created a gulp.task in gulpfile.js for compass and autoprefixer. When I run "gulp server" using the gulpfile.js below everything works but no autoprefixing; the scss files are run through compass and output as a css file and browserSync live-reloads the page in the browser. Any help would be greatly appreciated.
'use strict';
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var stylish = require('jshint-stylish');
var paths = require('compass-options').paths();
var rename = require('gulp-rename');
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync');
var shell = require('gulp-shell');
//////////////////////////////
// Begin Gulp Tasks
//////////////////////////////
gulp.task('lint', function () {
return gulp.src([
paths.js + '/**/*.js',
'!' + paths.js + '/**/*.js'
])
.pipe(jshint())
.pipe(jshint.reporter(stylish))
});
//////////////////////////////
// Compass Task
//////////////////////////////
gulp.task('compass', function () {
return gulp.src(paths.sass + '/**/*')
.pipe(shell([
'bundle exec compass watch --time'
]));
});
//////////////////////////////
// Autoprefixer
//////////////////////////////
gulp.task('prefix', function() {
return gulp.src('css/style.css')
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('css'));
});
//////////////////////////////
// Watch
//////////////////////////////
gulp.task('watch', function () {
gulp.watch(paths.js + '/**/*.js', ['lint']);
});
//////////////////////////////
// BrowserSync Task
//////////////////////////////
gulp.task('browserSync', function () {
browserSync.init([
paths.css + '/**/*.css',
paths.js + '/**/*.js',
paths.img + '/**/*',
paths.fonts + '/**/*',
paths.html + '/**/*.html',
]);
});
//////////////////////////////
// Server Tasks
//////////////////////////////
gulp.task('server', ['watch', 'compass', 'browserSync']);
Like #tmack mentioned you must use autoprefixer in the same task. Here is an example from one of my projects (I use gulp-compass for compiling):
var compass = require('gulp-compass'),
autoprefixer = require('gulp-autoprefixer');
// Styles
gulp.task('styles', function() {
return gulp.src(['src/styles/main.scss'])
.pipe(compass({
sass : 'src/styles',
css : 'dist/styles',
logging : false,
comments : false,
style : 'expanded'
}))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'ff 17', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('dist/styles'));
});
Ciao
Ralf
Related
I have problem. I create my own gulpfile and all works fine but i wanna add a browserify to use modules, but i want to watch this. Can you be so nice and watch at my gulpfile and said if i can add somewhere in serve task to watch also browserify? Or maybe you have better solution for this problem?
var gulp = require('gulp');
var browserSync = require('browser-sync');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var cleanCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var htmlReplace = require('gulp-html-replace');
var htmlMin = require('gulp-htmlmin');
var config = {
dist:'dist/',
src:'src/',
htmlIn:'src/*.html',
cssIn:'src/css/**/*.css',
jsIn:'src/script/**/*.js',
scssIn:'src/scss/**/*.scss',
cssOut:'dist/css',
jsOut:'dist/script',
scssOut:'src/css',
}
gulp.task('reload',function(){
browserSync.reload();
});
gulp.task('serve', ['sass','scripts'], function(){
browserSync({
server:config.src,
port:5050
});
gulp.watch([config.htmlIn, config.jsIn], ['reload']);
gulp.watch(config.scssIn, ['sass']);
})
gulp.task('sass', function(){
return gulp.src(config.scssIn)
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({
browsers:['last 3 versions']
}))
.pipe(sourcemaps.write())
.pipe(gulp.dest('src/css'))
.pipe(browserSync.stream());
})
gulp.task('mincss',function(){
return gulp.src(config.cssIn)
.pipe(cleanCSS())
.pipe(gulp.dest(config.cssOut))
})
gulp.task('minjs',function(){
return gulp.src(config.jsIn)
.pipe(uglify())
.pipe(gulp.dest(config.jsOut));
})
gulp.task('default', ['serve']);
Add another gulp watch for your browserify.
gulp.watch(config.jsIn, ['browserify']);
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'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']);
See below. The problem I'm having with my current code is that Sourcemaps aren't getting injected via Browsersync. Am I missing something here or doing it the wrong way?
For reference:
https://www.browsersync.io/docs/gulp/#gulp-sass-maps
// requirements
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var browserSync = require('browser-sync').create();
var prefix = require('gulp-autoprefixer');
var rename = require('gulp-rename');
var sourcemaps = require('gulp-sourcemaps');
var cssclean = require('gulp-clean-css');
// create sass tasks
gulp.task('sass', function() {
return sass('assets/scss/style.scss', {sourcemap: true, style: 'compact'})
.on('error', function (err) {
console.error('Error!', err.message);
})
.pipe(rename({suffix: '.min'}))
.pipe(cssclean())
.pipe(prefix("last 2 versions", "> 1%", "ie 8", "Android 2", "Firefox ESR"))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('assets/styles'))
.pipe(browserSync.stream({match: '**/*.css'}))
});
gulp.task('serve', ['sass'], function() {
browserSync.init({
proxy: "localhost/portfolio2014",
open:false
});
gulp.watch("assets/scss/**/*.scss", ['sass']);
gulp.watch(["assets/styles/*.css", "site/**/*", "content/**/*", "assets/javascript/*.js"]).on('change', browserSync.reload);
});
// default task (just run gulp)
gulp.task('default', ['serve'] );
Do you have to use gulp-ruby-sass? The gulpfile.js below is adding sourcemaps with gulp-sass and updating the browser when saving .scss files with sourcemaps.
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var prefix = require('gulp-autoprefixer');
var rename = require('gulp-rename');
var sourcemaps = require('gulp-sourcemaps');
var cssclean = require('gulp-clean-css');
// create sass tasks
gulp.task('sass', function () {
return gulp.src('assets/scss/test.scss')
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(rename({ suffix: '.min' }))
.pipe(cssclean())
.pipe(prefix("last 2 versions", "> 1%", "ie 8", "Android 2", "Firefox ESR"))
.pipe(sourcemaps.write(''))
.pipe(gulp.dest('assets/styles'))
.pipe(browserSync.stream({ match: '**/*.css' }))
.on('error', function (err) {
console.error('Error!', err.message);
});
});
gulp.task('serve', ['sass'], function () {
browserSync.init({
proxy: "localhost/portfolio2014",
open: false
});
gulp.watch("assets/scss/**/*.scss", ['sass']);
gulp.watch(["assets/styles/*.css", "assets/javascript/*.js"]).on('change', browserSync.reload);
});
// default task (just run gulp)
gulp.task('default', ['serve']);
So I'm trying gulp out but I get this.
TypeError: Arguments to path.join must be string
What am I missing here?
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer');
gulp.task('styles', function() {
return sass('scss/*.scss', { style: 'expanded' })
.pipe(autoprefixer('last 2 version'))
.pipe(gulp.dest('../css'));
});
gulp.task('watch', function() {
gulp.watch('scss/**/*.scss', ['styles']);
});
gulp.task('default', ['styles', 'watch'], function() {});