gulp_newsWorkflow

fusion s10; add autoprefixer; todo path + multiRender

todo premailer on FR:root; BS multirender show br s9

généraliser les divers destinations, rajouter BS sur css et html

attention à la queu d'exec

résolution de gulp > relative source paths to relative destination paths

@see ici

dernière branch

>branch simpl7

install step by step

domoti workflow > news loco + cat

voir les infos

TODO

revoir gulpfil.js > browser-sync à utiliser avec partialité mais rajouter le scss dans la boucle au moins pour master....
voir npm markdown to html file dans chaques dossiers domoti

init

init node package modul in your pwd

npm init > to creat package.json file

create your own directory :

mkdir src/ render/
- cd src > mkdir partial/ scss/ var/
  - cd scss/ && touch styles.scss

install Gulp in pwd

npm install gulp --save-dev (voir si plus rapide de cloner time = 1min)
create gulpfile.js file for your first tasck
- touch gulpfile.js
contenu gulpfile :
- // première étape consiste à le requérir (require)
- var gulp = require('gulp');

install Sass

npm install gulp-sass --save-dev (time : 3min see clone cp -ri in cli)
add dependance to gulpfile
- // Requires the gulp-sass plugin
- var sass = require('gulp-sass');

install BrowserSync !!!attention!!! en admin

npm install browser-sync --msvs_version=2013

déclarer BS

var browserSync = require('browser-sync');

lancer la tache BS dans gulpfile.js

gulp.task('browserSync',function () {
   browserSync({
     server: {
     baseDir: 'src'
     }
   })
 })

install slim

déclarer slim
npm install gulp-slim --save-dev
- ```
var slim = require('gulp-slim');
```
npm install gulp-slim --save-dev
time:-1min

création de la liste de taches

//JS

gulp.task('sass', function(){  
   return gulp.src('src/scss/styles.scss')  
   .pipe(sass())  // ici on utilise gulp-sass  
   .pipe(gulp.dest('render/css'))
 });

test : gulp sass
- si aucune règle dans .scss = render/styles.scss
- si règle dans .scss (ex:.test{va:t}) = render/styles.scss
- dans tous les cas création du dossier css/
remplacer src/scss/styles.scss par un pattern src/scss/**/*.scss qui matchera tous les fichiers ayant une extension .scss dans src/scss ou dans un dossier enfant.
- ```
//JS
gulp.task('sass', function() {
  return gulp.src('src/scss/**/*.scss')
  .pipe(sass())
  .pipe(gulp.dest('render/css'))
```
})
Tout autre fichier Sass trouvé dans src/scss sera automatiquement inclus dans la tâche (ex: src/scss/outlook.scss > render/css/outlook.css)

Watch

Gulp lance les tâches automatiquement à chaque fois qu’un fichier est sauvegardé.

Gulp propose une méthode watch qui suit les modifications de fichiers. La syntaxe de la méthode watch est la suivante :

//JS
  gulp.watch('fichiers-a-suivre', ['tache1', 'tache2', 'tache3']);

sur notre workflow

// surveille tous les .scss et ses sfold/enfants

gulp.task('watch', function(){ gulp.watch('src/scss/**/*.scss', ['sass']); // autres observations })

voir en live avec BrowserSync

intsall :
- ```
npm install browser-sync --save-dev
```
- (time 2min show cp -ri) attention à windows install VS

#infos

--save-dev ajouter le plugin aux dépendances de développement dans package.json.
Globbing avec Node
Les globs sont des patterns de correspondance qui fonctionnent un peu comme les regex mais spécifiquement pour les chemins d’accès.
- les Globs regex pour les paths (4 sont necessaires)
  - 1- *.scss : pattern * joker tous les .scss dans le dossier courant
  - 2- */.scss tous les .scss dans le dossier racine + enfants
  - 3- !not-me.scss pattern ! pour les fichiers à exclures ici not-me.css
  - 4- *.+(scss|sass) .scss + .sass

manuelWeb/gulp_newsWorkflow