Does gulp-autoprefixer work with gulp-compass? - gulp

If I compile the scss with gulp-ruby-sass, gulp-autoprefixer works, but if a compile de scss with gulp-compass autoprefixer doen't work. This is the code:
gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
livereload = require('gulp-livereload'),
prefix = require('gulp-autoprefixer'),
compass = require('gulp-compass');
// Styles .scss files to .css
gulp.task('style', function(){
return sass('src/sass/style.scss', {
style: 'expanded'
})
.on('error', sass.logError)
.pipe(prefix('last 2 version'))
.pipe(gulp.dest('dist/'))
.pipe(livereload());
});
// Compass to .css
gulp.task('compass', function(){
gulp.src('src/sass/*.sass')
.pipe(compass({
config_file: './config.rb',
css: 'dist/',
sass: 'src/sass',
style: 'expanded'
}))
.pipe(prefix('last 2 versions'))
.pipe(gulp.dest('dist/'))
.pipe(livereload());
});
// Watch with compass
gulp.task('watch', function(){
livereload.listen();
gulp.watch('src/sass/*.scss', ['compass']);
});
// Watch with ruby-sass
gulp.task('watch2', function(){
livereload.listen();
gulp.watch('src/sass/*.scss', ['style']);
});
watch task works, watch2 task compile the scss but doesn't work autoprefixer.

That might be not a direct answer to your problem, but you might consider to replace "gulp-ruby-sass" and "gulp-compass" with "gulp-scss" package which is way more popular and see if that resolves your issue.
Take a look on my setup, you might like it and/or find some useful information: Reaper

Related

Gulp v4 doesn't update the browser

When I start gulp Google Chrome doesn't open my http://localhost:3000 and doesn't update my css file automaticaly. I have no idea what am I doing wrong.
It's my first time using Gulp, guys. Any idea to fix it? Thanks
var gulp = require('gulp')
var browserSync = require('browser-sync').create()
var sass = require('gulp-sass')
//compile sass
gulp.task('sass', function() {
return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'])
.pipe(sass())
.pipe(gulp.dest("src/css"))
.pipe(browserSync.stream())
})
//move js to src/js
gulp.task('js', function(){
return gulp.src(['node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js',
'node_modules/popper.js/dist/umd/popper.min.js'])
.pipe(gulp.dest("src/js"))
.pipe(browserSync.stream())
})
//gulp html and scss
gulp.task('serve', gulp.parallel('sass'), function(){
browserSync.init({
server: "./src"
})
gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], ['sass'])
gulp.watch("src/*.html").on('change', browserSync.reload)
})
gulp.task('default', gulp.series('js', 'serve'))
Change this line:
gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], ['sass'])
to
gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], gulp.series('sass'))
Your version was gulp v3, not gulp v4.
Also I would change
gulp.task('default', gulp.series('js', 'serve'))
to
gulp.task('default', gulp.series('js', 'sass', 'serve'))
so that you can simplify to:
gulp.task('serve', function(){ // removed the parallel part.
The first time you run gulp.default you may need refresh the browser if you have some changes already made to your files. Best to start the default task first and then make changes to your files.

Watch for changes in subdirectories but target a single file as src in Gulp

I have the following gulp task:
gulp.task("stylePipe", function(){
var postcssPlugins = [
autoprefixer({browsers: ['last 2 version']}), // autoprefixer
cssnano() // css minifier
];
gulp.src("src/sass/*.scss")
.pipe(sourcemaps.init())
.pipe(plumber())
.pipe(sass().on("error", sass.logError)) // scan for errors
.pipe(postcss(postcssPlugins)) // runs postcss plugins listed above
.pipe(rename({ extname: '.min.css' }))
.pipe(sourcemaps.write('maps'))
.pipe(gulp.dest("dist/css")); // compile into dist
});
gulp.task("styleWatch", ["stylePipe"], browsersync.reload);
gulp.task("watch", function(){
browsersync({
server: {
baseDir: "dist/"
}
});
gulp.watch("src/sass/*.scss", ["styleWatch"]);
});
I want to watch for changes in all the subdirectories listed below
using only the main.scss as src in the gulp.src("src/sass/*.scss") (main.scss is the only file that should be preprocessed whenever there is a change in the subdirectories' files).
How can I accomplish this?
I simply modified
gulp.watch("src/sass/*.scss", ["styleWatch"]);
into
gulp.watch("src/sass/**/*.scss", ["styleWatch"]);

Attemoting to get browsersync to work from Gulp

Have been unable to get Browsersync working in Gulp.
I have installed the standard JointsWP build (this is a wordpress/foundation mash up), but the following gulpfile doesn't kick off browsersync at all.
I am using MAMP and the site works fine.
Tried a few things but limited gulpfile knowledge.
thanks in advance.
// Grab our gulp packages
var gulp = require('gulp'),
gutil = require('gulp-util'),
sass = require('gulp-sass'),
cssnano = require('gulp-cssnano'),
autoprefixer = require('gulp-autoprefixer'),
sourcemaps = require('gulp-sourcemaps'),
jshint = require('gulp-jshint'),
stylish = require('jshint-stylish'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
rename = require('gulp-rename'),
plumber = require('gulp-plumber'),
bower = require('gulp-bower'),
babel = require('gulp-babel'),
browserSync = require('browser-sync').create();
// Compile Sass, Autoprefix and minify
gulp.task('styles', function() {
return gulp.src('./assets/scss/**/*.scss')
.pipe(plumber(function(error) {
gutil.log(gutil.colors.red(error.message));
this.emit('end');
}))
.pipe(sourcemaps.init()) // Start Sourcemaps
.pipe(sass())
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('./assets/css/'))
.pipe(rename({suffix: '.min'}))
.pipe(cssnano())
.pipe(sourcemaps.write('.')) // Creates sourcemaps for minified
styles
.pipe(gulp.dest('./assets/css/'))
});
// JSHint, concat, and minify JavaScript
gulp.task('site-js', function() {
return gulp.src([
// Grab your custom scripts
'./assets/js/scripts/*.js'
])
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'))
.pipe(concat('scripts.js'))
.pipe(gulp.dest('./assets/js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(sourcemaps.write('.')) // Creates sourcemap for minified JS
.pipe(gulp.dest('./assets/js'))
});
// JSHint, concat, and minify Foundation JavaScript
gulp.task('foundation-js', function() {
return gulp.src([
// Foundation core - needed if you want to use any of the
components below
'./vendor/foundation-sites/js/foundation.core.js',
'./vendor/foundation-sites/js/foundation.util.*.js',
// Pick the components you need in your project
'./vendor/foundation-sites/js/foundation.abide.js',
'./vendor/foundation-sites/js/foundation.accordion.js',
'./vendor/foundation-sites/js/foundation.accordionMenu.js',
'./vendor/foundation-sites/js/foundation.drilldown.js',
'./vendor/foundation-sites/js/foundation.dropdown.js',
'./vendor/foundation-sites/js/foundation.dropdownMenu.js',
'./vendor/foundation-sites/js/foundation.equalizer.js',
'./vendor/foundation-sites/js/foundation.interchange.js',
'./vendor/foundation-sites/js/foundation.magellan.js',
'./vendor/foundation-sites/js/foundation.offcanvas.js',
'./vendor/foundation-sites/js/foundation.orbit.js',
'./vendor/foundation-sites/js/foundation.responsiveMenu.js',
'./vendor/foundation-sites/js/foundation.responsiveToggle.js',
'./vendor/foundation-sites/js/foundation.reveal.js',
'./vendor/foundation-sites/js/foundation.slider.js',
'./vendor/foundation-sites/js/foundation.sticky.js',
'./vendor/foundation-sites/js/foundation.tabs.js',
'./vendor/foundation-sites/js/foundation.toggler.js',
'./vendor/foundation-sites/js/foundation.tooltip.js',
])
.pipe(babel({
presets: ['es2015'],
compact: true
}))
.pipe(sourcemaps.init())
.pipe(concat('foundation.js'))
.pipe(gulp.dest('./assets/js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(sourcemaps.write('.')) // Creates sourcemap for minified
Foundation JS
.pipe(gulp.dest('./assets/js'))
});
// Update Foundation with Bower and save to /vendor
gulp.task('bower', function() {
return bower({ cmd: 'update'})
.pipe(gulp.dest('vendor/'))
});
// Browser-Sync watch files and inject changes
gulp.task('browsersync', function() {
// Watch files
var files = [
'./assets/css/*.css',
'./assets/js/*.js',
'**/*.php',
'assets/images/**/*.{png,jpg,gif,svg,webp}',
];
browserSync.init(files, {
// Replace with URL of your local site
proxy: "s18.dev",
});
gulp.watch('./assets/scss/**/*.scss', ['styles']);
gulp.watch('./assets/js/scripts/*.js', ['site-js']).on('change',
browserSync.reload);
});
// Watch files for changes (without Browser-Sync)
gulp.task('watch', function() {
// Watch .scss files
gulp.watch('./assets/scss/**/*.scss', ['styles']);
// Watch site-js files
gulp.watch('./assets/js/scripts/*.js', ['site-js']);
// Watch foundation-js files
gulp.watch('./vendor/foundation-sites/js/*.js', ['foundation-js']);
});
// Run styles, site-js and foundation-js
gulp.task('default', function() {
gulp.start('styles', 'site-js', 'foundation-js');
});
It was in fact my lack of gulp knowledge....
On closer inspection of the gulpfile, there were 2 functions - one with BS and one without...
I was running 'gulp watch' with no joy, whereas simply running 'gulp browsersync' did the trick.
bonza.

Gulp-minify-css does not produce output files

I have set up a very simple gulpfile.js There are only two task - 'sass' and 'minify-js'. These two tasks are fired by the task 'watch' when a change is detected. It all seems to be working well: Gulp is listening for changes, *.scss files are compiled into CSS, the console generates output as expected, without any errors. However, the CSS files do not get minified there are no output files from the 'minify-css' task whatsoever.
Why is 'minify-css' not working? What am I missing here?
This is my gulpfile.js:
var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var minifyCSS = require('gulp-minify-css');
gulp.task('sass', function() {
gulp.src('plugins/SoSensational/styles/sass/*.scss')
.pipe(sass())
.pipe(gulp.dest('plugins/SoSensational/styles/dest/'));
});
gulp.task('minify-css', function() {
gulp.src('plugins/SoSensational/styles/dest/*.css')
.pipe(minifyCSS())
.pipe(gulp.dest('plugins/SoSensational/styles/dest/'));
});
gulp.task('watch', function() {
gulp.watch('plugins/SoSensational/styles/sass/*.scss', ['sass', 'minify-css']);
});
Sounds like a race condition. Sass and MinifyCSS are executed in parallel, might be that your Sass task isn't done when you're already running MinifyCSS. Sass should be a dependency, so you have two options:
Make Sass a dependency from minifycss:
gulp.task('minify-css', ['sass'], function() {
return gulp.src('plugins/SoSensational/styles/dest/*.css')
.pipe(minifyCSS())
.pipe(gulp.dest('plugins/SoSensational/styles/dest/'));
});
gulp.task('watch', function() {
gulp.watch('plugins/SoSensational/styles/sass/*.scss', ['minify-css']);
});
Have one task that does both!
gulp.task('sass', function() {
return gulp.src('plugins/SoSensational/styles/sass/*.scss')
.pipe(sass())
.pipe(minifyCSS())
.pipe(gulp.dest('plugins/SoSensational/styles/dest/'));
});
The latter one is actually the preferred version. You save yourself a lot of time if you don't have an intermediate result
Btw: Don't forget the return statements
I know this is kind of an old question but thought I'd throw this out there because it's something that's helped me. To build on the answer from ddprrt, I'd recommend changing:
gulp.task('sass', function() {
return gulp.src('plugins/SoSensational/styles/sass/*.scss')
.pipe(sass())
.pipe(minifyCSS())
.pipe(gulp.dest('plugins/SoSensational/styles/dest/'));
});
to:
var rename = require('gulp-rename');
gulp.task('sass', function() {
return gulp.src('plugins/SoSensational/styles/sass/*.scss')
.pipe(sass('site.css'))
.pipe(gulp.dest('plugins/SoSensational/styles/dest/'))
.pipe(minifyCSS())
.pipe(rename('site.min.css'))
.pipe(gulp.dest('plugins/SoSensational/styles/dest/'));
});
This allows you to debug with the un-minified CSS and deploy the minified version.
It's because the gulp-minify-css is deprecated. Use gulp-clean-css instead.
Click here(https://www.npmjs.com/package/gulp-minify-cssĀ "npm-clean-css")!

how can i change my gulp file so that it runs build task whenever there's a change in the codebase?

Currently I've this gulp, everytime I make a change in the application to view the changes I've to run gulp build, how can i improve this gulp file by adding a watch task so that it automatically detects that a change has been introduces somewhere in the js folder / in html files and it would automatically run the build task for me.
var gulp = require('gulp'),
csso = require('gulp-csso'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
ngAnnotate = require('gulp-ng-annotate'),
minifyHtml = require("gulp-minify-html"),
ngHtml2Js = require('gulp-ng-html2js');
gulp.task('build', function () {
gulp.src(['../css/bootstrap_min.css', '../css/inputs.css', '../css/main.css',
'../css/recording.css','../css/images.css','../css/responsive.css','../css/calendar.css'])
.pipe(concat('index.min.css'))
.pipe(csso())
.pipe(gulp.dest('../css/'));
gulp.src(['../lib/date.js', '../lib/angular/angular-1.2.17.js','../lib/angular/angular-resource.js',
'../lib/ui-bootstrap-tpls-0.11.0.js','../lib/angular-ui-router.js',
'../lib/underscore.min.js','../lib/sortable.js','../lib/localize.js','../lib/bindonce.min.js',
'../lib/screenfull.js', '../lib/zeroclipboard.min.js'])
.pipe(concat('libs.min.js'))
.pipe(ngAnnotate())
.pipe(uglify())
.pipe(gulp.dest('../lib'));
gulp.src(['../js/app.js','../js/services.js','../js/controllers.js','../js/filters.js','../js/directives.js'])
.pipe(concat('index.min.js'))
.pipe(ngAnnotate())
.pipe(uglify())
.pipe(gulp.dest('../js'));
gulp.src("../partials/*.html")
.pipe(minifyHtml({
empty: true,
spare: true,
quotes: true
}))
.pipe(ngHtml2Js({
moduleName: "Partials",
prefix: "partials/"
}))
.pipe(concat("partials.min.js"))
.pipe(uglify())
.pipe(gulp.dest("../js"));
});
gulp.task('partials', function () {
gulp.src("../partials/*.html")
.pipe(minifyHtml({
empty: true,
spare: true,
quotes: true
}))
.pipe(ngHtml2Js({
moduleName: "Partials",
prefix: "partials/"
}))
.pipe(concat("partials.min.js"))
.pipe(uglify())
.pipe(gulp.dest("../js"));
});
You can just add watch task like this
gulp.task('watch', function() {
gulp.watch('../js/**/*.js', ['build']);
gulp.watch('../css/**/*.css', ['build']);
gulp.watch('../partials/**/*.html', ['build']);
})
Hope this help!
The other answer works for older versions of gulp. The syntax changed in version 4.0.
gulp.task('watch', function() {
gulp.watch('../js/**/*.js', gulp.series('build'));
gulp.watch('../css/**/*.css', gulp.series('build'));
gulp.watch('../partials/**/*.html', gulp.series('build'));
})