02. Initialisation : Ajout de foundation 6 et automatisation avec Gulp

Après avoir écrit les premières lignes de notre application avec Angular 2, nous allons dans cette leçon terminer la mise en place de notre environnement en améliorant notre processus avec Gulp. Nous nous attarderons également sur les styles de base avec avec Foundation 6 et SASS.

Installation des autres librairies

Avant toute chose, ajoutons quelques librairies externes à notre application:

$> npm install toastr jquery foundation-sites font-awesome -S

Ajoutons ces librairies JS dans notre page. Concernant la partie style, nous créerons prochainement un fichier regroupant tous les CSS; ajoutons le également.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ShowTheque Angular 2</title>
    <link rel="stylesheet" href="css/app.css">
</head>
<body>

    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/toastr/build/toastr.min.js"></script>
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>

    <script>
        System.import('app').catch(function(err){console.error(err)});
    </script>

</body>
</html>

Ecriture du SASS pour styler notre application

Nous allons créer un fichier scss/app.scss regroupant nos sources SASS, que nous transformerons ensuite en CSS avec une tâche Gulp.

$fa-font-path: 'fonts';
@import 'font-awesome';

$button-margin: 0 0 0 0;

@import 'foundation';
@include foundation-everything(true);

@import 'toastr';

@import permet d’importer d’autres fichiers SCSS dans notre application; c’est Gulp qui s’occupera de définir les chemins où trouver ces fichiers. J’en profite pour modifier quelques variables afin de personnaliser un peu ces librairies, c’est l’avantage de travailler avec SASS. Si vous vous demandez comment retrouver les différentes variables, vous pouvez bien entendu aller dans les sources ou consulter la documentation de Foundation qui pour chaque composant donne en fin de page les variables utilisées.

Gulp et ses plugins

Nous allons maintenant mettre en place Gulp pour transformer notre SASS en CSS et notre TypeScript en JavaScript. Pour cela on va avoir besoin des plugins suivants:

Il faudra également ajouter Gulp dans la section script pour pouvoir l'utiliser en local (vous aurez en bas de page le fichier package.json complet).

Créons ensuite à la racine un fichier gulpfile.js pour décrire nos tâches.

Définition des tâches

Plutôt qu'un long discours, les commentaires

// import de gulp et del (qui n'est pas un plugin gulp)
var gulp = require('gulp'), del = require('del');

// chargement automatique des plugins
// var rename = require('rename'); sera $.rename() 
var $ = require('gulp-load-plugins')({ lasy: true });


///////////////////////////////////////////////////
//  CSS
///////////////////////////////////////////////////

// récupération des fonts pour les mettre dans notre dossier css
gulp.task('font-awesome-fonts', function () {
    return gulp.src(['node_modules/font-awesome/fonts/*.*'])
        .pipe(gulp.dest('css/fonts'));
});

// transformation de nos sources scss en css
gulp.task('foundation-style', ['font-awesome-fonts'], function () {

    return gulp.src('scss/app.scss') // fichiers sources
        .pipe($.sass({ // transformation du sass en css
            outputStyle: 'nested',
            precision: 5,
            includePaths: [ // chemin à inclure pour faire fonctionner les @import
                'node_modules/foundation-sites/scss',
                'node_modules/font-awesome/scss',
                'node_modules/toastr'
            ]
        }))
        .pipe($.rename('app.css')) // renommage du fichier
        .pipe($.autoprefixer({ // ajout des préfixes des navigateurs
            browsers: ['last 2 versions', 'ie >= 11', 'ios_saf >= 9', 'and_chr >= 5.0']
        }))
        .pipe(gulp.dest('css')) // copie du fichier dans sa destination
        .pipe($.rename('app.min.css')) // renommage du flux avec .min
        .pipe($.csso()) // minification du css
        .pipe(gulp.dest('css')); // copie du fichier dans sa destination
});

///////////////////////////////////////////////////
//  HTML
///////////////////////////////////////////////////

// nettoyage des fichiers précédemment générés
gulp.task('app-clean-html', function () {
    return del(['app/**/*.html']);
});

//Copie des fichiers HTML de src vers app
gulp.task('app-html', ['app-clean-html'], function () {
    return gulp.src('src/**/*.html')
        .pipe(gulp.dest('app/'));
});

///////////////////////////////////////////////////
//  JavaScript
///////////////////////////////////////////////////

// nettoyage des fichiers précédemment générés
gulp.task('app-clean-typescript', function () {
    return del(['app/**/*.js']);
});

// transformation du TypeScript en JavaScript
gulp.task('app-typescript', ['app-clean-typescript'], function () {
    var tsProject = $.typescript.createProject('tsconfig.json');
    return gulp.src(['typings/index.d.ts', 'src/**/*.ts'])
        .pipe(tsProject())
        .pipe(gulp.dest('app/'));
});

///////////////////////////////////////////////////
//  Watcher
///////////////////////////////////////////////////

gulp.task('default', ['foundation-style', 'app-typescript', 'app-html'], function () {
    gulp.watch('scss/**/*.scss', ['foundation-style']);
    gulp.watch('src/**/*.ts', ['app-typescript']);
    gulp.watch('src/**/*.html', ['app-html']);
});

Dans la tâche défaut nous retrouvons des watcher qui permettent d’appeler nos tâches dès qu’un fichier est modifié ;ainsi tout se fera automatiquement.

Lancement du processus

Dernière ligne droite pour la mise en place de notre environnement; le lancement en parallèle des watcher Gulp et du serveur Web. Dès qu’un fichier sera modifié nous verrons immédiatement le rendu dans le navigateur.

Pour ce faire, nous allons installer une dernière dépendance concurrently:

$> npm install concurrently -D

Et la configurer dans le package.json .Ce qui donne au final:

{
  "name": "showtheque-angular2",
  "version": "1.0.0",
  "description": "ShowTheque avec Angular 2",
  "main": "index.html",
  "scripts": {
    "gulp": "gulp",
    "tsc": "tsc",
    "typings": "typings",
    "server": "lite-server",
    "postinstall": "typings install",
    "concurrent":"concurrent",
    "start":"concurrent \"npm run gulp\" \"npm run server\""
  },
  "dependencies": {
    "@angular/common": "~2.1.1",
    "@angular/compiler": "~2.1.1",
    "@angular/core": "~2.1.1",
    "@angular/forms": "~2.1.1",
    "@angular/http": "~2.1.1",
    "@angular/platform-browser": "~2.1.1",
    "@angular/platform-browser-dynamic": "~2.1.1",
    "@angular/router": "~3.1.1",
    "@angular/upgrade": "~2.1.1",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "foundation-sites": "^6.2.4",
    "jquery": "^3.1.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.39",
    "toastr": "^2.1.2",
    "zone.js": "^0.6.25"
  },
  "devDependencies": {
    "concurrently": "^3.1.0",
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-csso": "^2.0.0",
    "gulp-load-plugins": "^1.4.0",
    "gulp-replace": "^0.5.4",
    "gulp-sass": "^2.2.0",
    "gulp-typescript": "^3.0.2",
    "lite-server": "^2.2.2",
    "typescript": "^2.0.6",
    "typings": "1.5.0"
  }
}