Add gulp with autoprefixing and minification for sass

This commit is contained in:
Vivian Guillen 2016-06-03 15:04:04 -07:00
parent 97ddd3da1b
commit 7610a7978a
2 changed files with 74 additions and 12 deletions

View File

@ -0,0 +1,52 @@
////////////////////////////////
//Setup//
////////////////////////////////
// Plugins
var gulp = require('gulp'),
pjson = require('./package.json'),
gutil = require('gulp-util'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
cssnano = require('gulp-cssnano'),
rename = require('gulp-rename'),
del = require('del'),
plumber = require('gulp-plumber'),
pixrem = require('gulp-pixrem'),
browserSync = require('browser-sync');
// Relative paths function
var pathsConfig = function (appName) {
this.app = "./" + (appName || pjson.name);
return {
app: this.app,
templates: this.app + '/templates',
css: this.app + '/static/css',
sass: this.app + '/static/sass',
fonts: this.app + '/static/fonts',
images: this.app + '/static/images',
js: this.app + '/static/js',
}
};
var paths = pathsConfig();
////////////////////////////////
//Tasks//
////////////////////////////////
// Styles
gulp.task('styles', function() {
return gulp.src(paths.sass + '/project.scss', { style: 'expanded' })
.pipe(sass().on('error', sass.logError))
.pipe(plumber()) // It checks for errors
.pipe(autoprefixer({browsers: ['last 2 version']})) // Adds vendor prefixes
.pipe(pixrem()) // add fallbacks for rem units
.pipe(gulp.dest('./static/css/'))
.pipe(rename({ suffix: '.min' }))
.pipe(cssnano()) // Minifies the result
.pipe(gulp.dest('./static/css/'));
});

View File

@ -1,19 +1,29 @@
{ {
"name": "{{cookiecutter.project_slug}}", "name": "testing",
"version": "{{ cookiecutter.version }}", "version": "0.1.0",
"dependencies": {}, "dependencies": {},
"devDependencies": { "devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-watch": "~0.6.1",
"grunt-bg-shell": "~2.3.1",
"connect-livereload": "~0.3.2",
"time-grunt": "~1.2.1",
"load-grunt-tasks": "~3.2.0",
"grunt-sass": "~1.0.0",
"grunt-postcss": "~0.5.5",
"cssnano": "~2.1.0",
"autoprefixer-core": "~5.2.1", "autoprefixer-core": "~5.2.1",
"pixrem": "~1.3.1" "browser-sync": "^2.12.10",
"connect-livereload": "~0.3.2",
"cssnano": "~2.1.0",
"del": "^2.2.0",
"grunt": "~0.4.5",
"grunt-bg-shell": "~2.3.1",
"grunt-contrib-watch": "~0.6.1",
"grunt-postcss": "~0.5.5",
"grunt-sass": "~1.0.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.0",
"gulp-cssnano": "^2.1.2",
"gulp-pixrem": "^1.0.0",
"gulp-plumber": "^1.1.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.3.1",
"gulp-util": "^3.0.7",
"load-grunt-tasks": "~3.2.0",
"pixrem": "~1.3.1",
"time-grunt": "~1.2.1"
}, },
"engines": { "engines": {
"node": ">=0.8.0" "node": ">=0.8.0"