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).
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
@ -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)
- 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
- reset

View File

@ -1,5 +1,3 @@
// Note : this gulpfile works with gulp 3.9.1. Won't work with gulp 4
// Requires
var gulp = require('gulp');
@ -11,31 +9,44 @@ var rename = require('gulp-rename');
var cssnano = require('cssnano'); // minifies CSS
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 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 = [
unprefix(),
autoprefixer({
grid: true
}),
flexbugs(),
gaps()
autoprefixer({
grid: true,
browsers: browsersList
}),
flexbugs(),
gaps()
];
var pluginsProd = [
unprefix(),
autoprefixer({
grid: true
}),
flexbugs(),
gaps(),
cssnano()
autoprefixer({
grid: true,
browsers: browsersList
}),
flexbugs(),
gaps(),
cssnano()
];
// tâche cssDev = compile vers knacss-unminified.css
gulp.task('cssDev', function () {
gulp.task('cssDev', () => {
return gulp.src('./sass/knacss.scss')
.pipe(sass({
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é
gulp.task('cssProd', function () {
gulp.task('cssProd', () => {
return gulp.src('./sass/knacss.scss')
.pipe(sass())
.pipe(postcss(pluginsProd))
.pipe(gulp.dest('./css/'));
});
gulp.task('grillade', function () {
gulp.task('grillade', () => {
return gulp.src('./sass/_library/grillade-grid.scss')
.pipe(sass())
.pipe(postcss(pluginsProd))
.pipe(gulp.dest('./css/'));
});
gulp.task('grillade-flex', function () {
gulp.task('grillade-flex', () => {
return gulp.src('./sass/_library/grillade-flex.scss')
.pipe(sass())
.pipe(postcss(pluginsProd))
@ -68,9 +79,9 @@ gulp.task('grillade-flex', function () {
});
// Watcher
gulp.task('watch', function () {
gulp.watch(['./sass/*.scss'], ['cssDev']);
gulp.task('watch', () => {
gulp.watch(['./sass/*.scss'], gulp.series('cssDev'));
});
gulp.task('default', ['cssDev', 'cssProd', 'grillade', 'grillade-flex']);
// Tâche par défaut
gulp.task('default', gulp.series('cssDev', 'cssProd', 'grillade', 'grillade-flex'));

View File

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