Gulpfile jump to v4

This commit is contained in:
Rodolphe 2019-08-12 16:48:08 +02:00
parent e71db133ec
commit 409ffb49e3
3 changed files with 39 additions and 24 deletions

View file

@ -4,7 +4,7 @@
KNACSS, c'est une sorte de feuille de style CSS "reset" sur-vitaminée qui permet de commencer un projet à partir de zéro tout en tenant compte de bonnes pratiques générales (accessibilité, performance, responsive webdesign, grille de mise en forme). KNACSS, c'est une sorte de feuille de style CSS "reset" sur-vitaminée qui permet de commencer un projet à partir de zéro tout en tenant compte de bonnes pratiques générales (accessibilité, performance, responsive webdesign, grille de mise en forme).
Conçu par l'agence web [Alsacreations.fr](http://alsacreations.fr) et pensé pour être couplé avec des préprocesseurs tel que Sass, le micro-framework KNACSS est employé quotidiennement sur toute sorte de projet web quel que soit son type ou son envergure. Conçu par l'agence web [Alsacreations.fr](https://www.alsacreations.fr) et pensé pour être couplé avec des préprocesseurs tel que Sass, le micro-framework KNACSS est employé quotidiennement sur toute sorte de projet web quel que soit son type ou son envergure.
## Documentation ## Documentation
@ -12,6 +12,10 @@ Conçu par l'agence web [Alsacreations.fr](http://alsacreations.fr) et pensé po
- [**Pense-bête en PDF**](https://www.knacss.com/assets/pdf/knacss7-cheatsheet.pdf) - [**Pense-bête en PDF**](https://www.knacss.com/assets/pdf/knacss7-cheatsheet.pdf)
- Site web de présentation de KNACSS : <http://knacss.com> - Site web de présentation de KNACSS : <http://knacss.com>
## Gulp
Si au lancement de la tâche `gulp` vous obtenez une erreur de type `TypeError: Cannot read property 'apply' of undefined`, mettez à jour votre installation `npm i -g gulp-cli`.
## Fonctionnalités ## Fonctionnalités
- reset - reset

View file

@ -1,5 +1,3 @@
// Note : this gulpfile works with gulp 3.9.1. Won't work with gulp 4
// Requires // Requires
var gulp = require('gulp'); var gulp = require('gulp');
@ -11,14 +9,26 @@ var rename = require('gulp-rename');
var cssnano = require('cssnano'); // minifies CSS var cssnano = require('cssnano'); // minifies CSS
var autoprefixer = require('autoprefixer'); var autoprefixer = require('autoprefixer');
var unprefix = require("postcss-unprefix"); // deletes old prefixes var unprefix = require('postcss-unprefix'); // deletes old prefixes
var flexbugs = require('postcss-flexbugs-fixes'); // flexbox fixes for IE var flexbugs = require('postcss-flexbugs-fixes'); // flexbox fixes for IE
var gaps = require('postcss-gap-properties'); // gaps polyfill var gaps = require('postcss-gap-properties'); // gaps polyfill
var browsersList = [
'> 1%',
'last 2 versions',
'IE >= 10', 'Edge >= 16',
'Chrome >= 60',
'Firefox >= 50', 'Firefox ESR',
'Safari >= 10',
'ios_saf >= 10',
'Android >= 5'
];
var plugins = [ var plugins = [
unprefix(), unprefix(),
autoprefixer({ autoprefixer({
grid: true grid: true,
browsers: browsersList
}), }),
flexbugs(), flexbugs(),
gaps() gaps()
@ -27,7 +37,8 @@ var plugins = [
var pluginsProd = [ var pluginsProd = [
unprefix(), unprefix(),
autoprefixer({ autoprefixer({
grid: true grid: true,
browsers: browsersList
}), }),
flexbugs(), flexbugs(),
gaps(), gaps(),
@ -35,7 +46,7 @@ var pluginsProd = [
]; ];
// tâche cssDev = compile vers knacss-unminified.css // tâche cssDev = compile vers knacss-unminified.css
gulp.task('cssDev', function () { gulp.task('cssDev', () => {
return gulp.src('./sass/knacss.scss') return gulp.src('./sass/knacss.scss')
.pipe(sass({ .pipe(sass({
outputStyle: 'expanded' // CSS non minifiée plus lisible ('}' à la ligne) outputStyle: 'expanded' // CSS non minifiée plus lisible ('}' à la ligne)
@ -46,21 +57,21 @@ gulp.task('cssDev', function () {
}); });
// tâche cssProd = compile vers knacss.css minifié // tâche cssProd = compile vers knacss.css minifié
gulp.task('cssProd', function () { gulp.task('cssProd', () => {
return gulp.src('./sass/knacss.scss') return gulp.src('./sass/knacss.scss')
.pipe(sass()) .pipe(sass())
.pipe(postcss(pluginsProd)) .pipe(postcss(pluginsProd))
.pipe(gulp.dest('./css/')); .pipe(gulp.dest('./css/'));
}); });
gulp.task('grillade', function () { gulp.task('grillade', () => {
return gulp.src('./sass/_library/grillade-grid.scss') return gulp.src('./sass/_library/grillade-grid.scss')
.pipe(sass()) .pipe(sass())
.pipe(postcss(pluginsProd)) .pipe(postcss(pluginsProd))
.pipe(gulp.dest('./css/')); .pipe(gulp.dest('./css/'));
}); });
gulp.task('grillade-flex', function () { gulp.task('grillade-flex', () => {
return gulp.src('./sass/_library/grillade-flex.scss') return gulp.src('./sass/_library/grillade-flex.scss')
.pipe(sass()) .pipe(sass())
.pipe(postcss(pluginsProd)) .pipe(postcss(pluginsProd))
@ -68,9 +79,9 @@ gulp.task('grillade-flex', function () {
}); });
// Watcher // Watcher
gulp.task('watch', function () { gulp.task('watch', () => {
gulp.watch(['./sass/*.scss'], ['cssDev']); gulp.watch(['./sass/*.scss'], gulp.series('cssDev'));
}); });
// Tâche par défaut
gulp.task('default', ['cssDev', 'cssProd', 'grillade', 'grillade-flex']); gulp.task('default', gulp.series('cssDev', 'cssProd', 'grillade', 'grillade-flex'));

View file

@ -1,6 +1,6 @@
{ {
"name": "knacss", "name": "knacss",
"version": "7.1.1", "version": "8.0.0-alpha.0",
"homepage": "http://www.knacss.com/", "homepage": "http://www.knacss.com/",
"bugs": "https://github.com/alsacreations/KNACSS/issues", "bugs": "https://github.com/alsacreations/KNACSS/issues",
"author": "Raphaël GOETTER, Alsacreations", "author": "Raphaël GOETTER, Alsacreations",