Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
PostCSS basic setup and test with Gulp
{
"colorList": {
"c1" : ["#000000", "#000011"],
"c2" : ["#000011", "#000022"],
"c3" : ["#000022", "#000033"],
"c4" : ["#000033", "#000044"],
"c7" : ["#000044", "#000055"],
"c8" : ["#000055", "#000066"],
"c9" : ["#000066", "#000077"],
"c10" : ["#000077", "#000088"]
}
}
var gulp = require('gulp'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
browserSync = require('browser-sync'),
reload = browserSync.reload;
var gutil = require('gulp-util');
var postcss = require('gulp-postcss');
var simplevars = require('postcss-simple-vars');
var autoprefixer = require('autoprefixer-core');
var mqpacker = require('css-mqpacker');
var csswring = require('csswring');
var nestedcss = require('postcss-nested');
var corepostcss = require('postcss');
var categories = require('./data/cat-colors.json');
var dataloop = function(css) {
gutil.log('category[0] ');
for ( var category in categories.colorList ) {
var colorSet = categories.colorList[category];
var borderTop = colorSet[0];
var borderBottom = colorSet[1];
var rule = corepostcss.rule({ selector: '.cat-' + category });
rule.append({ prop: 'border-top', value: '1px solid ' + borderTop});
rule.append({ prop: 'border-bottom', value: '1px solid ' + borderBottom + ";"});
css.append(rule);
}
};
gulp.task('css', function () {
var processors = [
autoprefixer({browsers: ['last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4']}),
simplevars,
nestedcss,
dataloop
];
return gulp.src('./preCSS/*.css')
.pipe(postcss(processors))
// .pipe(postcss(processors).on('error', gutil.log))
.pipe(gulp.dest('./dest'));
});
// Static server
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "./"
}
});
});
// Concatenate & Minify JS
gulp.task('scripts', function() {
return gulp.src('js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist'))
.pipe(reload({stream:true}));
});
// Images
gulp.task('images', function() {
return gulp.src('img/**/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('dist/images'))
.pipe(notify({ message: 'Images task complete' }));
});
// Watch
gulp.task('watch', function() {
// Watch .scss files
gulp.watch('preCSS/**/*.css', ['css', browserSync.reload]);
// Watch .js files
gulp.watch(['js/**/*.js','main.js'], ['scripts', browserSync.reload]);
// Watch image files
gulp.watch('img/**/*', ['images']);
// Watch any files in dist/, reload on change
gulp.watch("*.html", browserSync.reload);
});
gulp.task('default', ['css', 'browser-sync', 'scripts', 'watch']);
{
"name": "Quick-setup",
"description": "Basic Gulp niceties for rapidly building stuff",
"version": "0.0.2",
"author": "Ben Frain",
"private": true,
"devDependencies": {
"autoprefixer-core": "^5.1.5",
"browser-sync": "^2.0.0-rc4",
"css-mqpacker": "^3.0.1",
"csswring": "^3.0.1",
"gulp": "^3.8.10",
"gulp-autoprefixer": "~2.1.0",
"gulp-cache": "~0.2.4",
"gulp-concat": "~2.4.2",
"gulp-imagemin": "~2.0.0",
"gulp-jshint": "~1.9.0",
"gulp-notify": "~2.0.1",
"gulp-postcss": "^4.0.3",
"gulp-rename": "~1.2.0",
"gulp-uglify": "~1.0.1",
"gulp-util": "^3.0.3",
"postcss": "^4.0.4",
"postcss-nested": "^0.2.1",
"postcss-simple-vars": "^0.2.3"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.