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).
|
||||
|
||||
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
|
||||
|
|
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
|
||||
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'));
|
||||
|
|
|
@ -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",
|
||||
|
|
Loading…
Reference in a new issue