Gulpfile jump to v4
This commit is contained in:
parent
e71db133ec
commit
409ffb49e3
3 changed files with 39 additions and 24 deletions
|
@ -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
|
||||||
|
|
55
gulpfile.js
55
gulpfile.js
|
@ -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,31 +9,44 @@ 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(),
|
}),
|
||||||
gaps()
|
flexbugs(),
|
||||||
|
gaps()
|
||||||
];
|
];
|
||||||
|
|
||||||
var pluginsProd = [
|
var pluginsProd = [
|
||||||
unprefix(),
|
unprefix(),
|
||||||
autoprefixer({
|
autoprefixer({
|
||||||
grid: true
|
grid: true,
|
||||||
}),
|
browsers: browsersList
|
||||||
flexbugs(),
|
}),
|
||||||
gaps(),
|
flexbugs(),
|
||||||
cssnano()
|
gaps(),
|
||||||
|
cssnano()
|
||||||
];
|
];
|
||||||
|
|
||||||
// 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'));
|
||||||
|
|
|
@ -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",
|
||||||
|
|
Loading…
Reference in a new issue