Skip to content

Instantly share code, notes, and snippets.

@JoshuaFrontEnd
Last active February 13, 2020 15:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JoshuaFrontEnd/ed83a3775852c5fe157d4ef69e6024a1 to your computer and use it in GitHub Desktop.
Save JoshuaFrontEnd/ed83a3775852c5fe157d4ef69e6024a1 to your computer and use it in GitHub Desktop.
Gulpfile con sourcemaps, autoprefixer y media queries sort para Sass
//Funciona con gulp 3.9.1 y solo hasta node@10
//npm init -y
//npm i -D gulp@3.9.1 gulp-sourcemaps gulp-sass gulp-postcss autoprefixer css-mqpacker sort-css-media-queries browser-sync
const gulp = require('gulp');
const sass = require('gulp-sass');
const postcss = require('gulp-postcss');
const sortCSSmq = require('sort-css-media-queries');
const browserSync = require('browser-sync').create();
const sourcemaps = require('gulp-sourcemaps');
// Static Server + watching scss/html files
gulp.task('serve', function () {
browserSync.init({
server: './html'
});
gulp.watch('html/assets/sass/**/*.scss', ['sass']);
gulp.watch('html/*.html').on('change', browserSync.reload);
gulp.watch('html/assets/js/*.js').on('change', browserSync.reload);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function () {
var postCSSplugins = [
require('autoprefixer')({
browsers: ['last 2 versions', '> 2%']
}),
require('css-mqpacker')({
sort: sortCSSmq
})
];
return gulp.src('html/assets/sass/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
.pipe(postcss(postCSSplugins))
.pipe(sourcemaps.write())
.pipe(gulp.dest('html/assets/css'))
.pipe(browserSync.stream());
});
gulp.task('default', ['sass', 'serve']);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment