Last active
August 28, 2018 14:35
-
-
Save 7studio/a4687627fa618bd357d6e81a0cc5ea1e to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var gulp = require('gulp'); | |
var plugins = require('gulp-load-plugins'); | |
var browserSync = require('browser-sync'); | |
var prettyBytes = require('pretty-bytes'); | |
var reload = browserSync.reload; | |
var $ = plugins(); | |
gulp.task('concat:styles', function() { | |
var paths = { | |
src: [ | |
'assets/src/styles/**/*.css', | |
'!assets/src/styles/**/*.bkp', | |
'!assets/src/styles/{partials,partials/**}' | |
], | |
dest: 'assets/styles' | |
}; | |
var props = require(process.cwd()+'/assets/src/styles/properties.json'); | |
var processors = [ | |
require('postcss-import')(), | |
require('postcss-url')({'url': 'rebase'}), | |
require('postcss-custom-properties')({'variables': props.properties}), | |
require('postcss-custom-media')({'extensions': props.media}), | |
require('postcss-media-minmax')(), | |
require('postcss-calc')({'precision': 3}), | |
require('postcss-color-rgb')(), | |
require('autoprefixer')(), | |
require('postcss-reporter')({clearReportedMessages: true}) | |
]; | |
return gulp.src(paths.src) | |
.pipe($.sourcemaps.init({loadMaps: true})) | |
.pipe($.postcss(processors)) | |
.pipe($.sourcemaps.write('.')) | |
.pipe(gulp.dest(paths.dest)); | |
}); | |
gulp.task('compress:styles', function() { | |
var paths = { | |
src: [ | |
'assets/styles/**/*.css', | |
'!assets/styles/**/debug.css', | |
], | |
dest: 'assets/styles' | |
}; | |
var CSSNANO = { | |
autoprefixer: false, | |
calc: false, | |
colormin: true, | |
convertValues: false, | |
discardComments: true, | |
discardDuplicates: false, | |
discardEmpty: true, | |
discardUnused: false, | |
filterPlugins: false, | |
mergeIdents: false, | |
mergeLonghand: false, | |
mergeRules: false, | |
minifyFontValues: true, | |
minifyGradients: false, | |
minifySelectors: true, | |
normalizeCharset: false, | |
normalizeUrl: false, | |
orderedValues: false, | |
reduceIdents: false, | |
reduceTransforms: false, | |
svgo: true, | |
uniqueSelectors: false, | |
zindex: false | |
}; | |
var processors = [ | |
require('cssnano')(CSSNANO), | |
require('postcss-reporter')({clearReportedMessages: true}) | |
]; | |
return gulp.src(paths.src) | |
.pipe($.bytediff.start()) | |
.pipe($.postcss(processors)) | |
.pipe($.rename({suffix: '.min'})) | |
.pipe($.bytediff.stop(function(data) { | |
const savedMsg = 'saved ' + (prettyBytes(data.savings) - (data.percent * 100).toFixed(1).replace(/\.0$/, '')) + '%'; | |
const msg = data.savings > 0 ? savedMsg : 'already optimized'; | |
return 'cssnano: ' + $.util.colors['green']('✔') + ' ' + data.fileName ' ' + $.util.colors['grey']('(' + msg ')'); | |
})) | |
.pipe(gulp.dest(paths.dest)); | |
}); | |
// create task that ensures the called task is complete before | |
// reloading browsers | |
gulp.task('watch:styles', ['contact:styles', 'compress:styles'], reload); | |
// Static Server + watching css files | |
gulp.task('serve', function() { | |
browserSync.init({ | |
proxy: 'myproject.test' | |
}); | |
// add browserSync.reload to the tasks array to make | |
// all browsers reload after tasks are complete. | |
gulp.watch(['assets/src/styles/**/*.css'], ['watch:styles']); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"private": true, | |
"scripts": {}, | |
"browserslist": [ | |
"> 1%", | |
"last 2 versions", | |
"not IE 10", | |
"iOS >= 7", | |
"Safari >= 8" | |
], | |
"devDependencies": { | |
"autoprefixer": "^7.1.2", | |
"browser-sync": "^2.18.13", | |
"cssnano": "^3.10.0", | |
"del": "^3.0.0", | |
"gulp": "^3.9.1", | |
"gulp-buffer": "0.0.2", | |
"gulp-bytediff": "^1.0.0", | |
"gulp-changed": "^3.1.0", | |
"gulp-concat": "^2.6.1", | |
"gulp-csscomb": "^3.0.8", | |
"gulp-if": "^2.0.2", | |
"gulp-imagemin": "^3.3.0", | |
"gulp-load-plugins": "^1.5.0", | |
"gulp-postcss": "^7.0.0", | |
"gulp-rename": "^1.2.2", | |
"gulp-require-tasks": "^1.2.1", | |
"gulp-sourcemaps": "^2.6.0", | |
"gulp-svgstore": "^6.1.0", | |
"gulp-tap": "^1.0.1", | |
"gulp-uglify": "^3.0.0", | |
"gulp-util": "^3.0.8", | |
"merge-stream": "^1.0.1", | |
"minimist": "^1.2.0", | |
"npm-check-updates": "^2.12.1", | |
"postcss-calc": "^6.0.0", | |
"postcss-color-rgb": "7studio/postcss-color-rgb", | |
"postcss-custom-media": "^6.0.0", | |
"postcss-custom-properties": "^6.1.0", | |
"postcss-import": "^10.0.0", | |
"postcss-media-minmax": "^3.0.0", | |
"postcss-reporter": "^5.0.0", | |
"postcss-unicode-characters": "^1.0.1", | |
"postcss-url": "^7.1.1", | |
"pretty-bytes": "^4.0.2", | |
"run-sequence": "^2.1.0", | |
"stylelint": "^8.0.0" | |
}, | |
"dependencies": { | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"media": { | |
"--viewport-XS": "(max-width: 629px)", | |
"--viewport-S": "(min-width: 630px) and (max-width: 944px)", | |
"--viewport-M": "(min-width: 945px) and (max-width: 1049px)", | |
"--viewport-L": "(min-width: 1050px) and (max-width: 1259px)", | |
"--viewport-XL": "(min-width: 1260px)" | |
}, | |
"properties": { | |
"--base-maxwidth": "1240px", | |
"--base-color": "#444", | |
"--base-bgcolor": "#fff", | |
"--base-font": "1em/1.375 sans-serif", | |
"--base-fontsize": "16px", | |
"--base-lineheight": "1.375em", | |
"--grid-column-gap": "20px", | |
"--grid-row-gap": "1.375rem", | |
"--color-grey": "#666", | |
"--color-darkgrey": "#444", | |
"--color-blue": "#0073aa" | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment