Utilisation de Sass et de Gulp

Trust me, I'm an engineer

Utilisation de Sass et de Gulp
Trust me, I'm an engineer
Geoffrey PREUD'HOMME
1 parent 344a37ad
Showing 6 changed files with 87 additions and 2 deletions Show diff stats
.gitignore
css/.gitignore
gulpfile.js
index.html
package.json
css/style.css -> scss/style.scss
 bower_components
+node_modules
@@ -0,0 +1,2 @@
+*
+!.gitignore
@@ -0,0 +1,39 @@
+var gulp = require('gulp');
+// var source = require('vinyl-source-stream');
+// var buffer = require('vinyl-buffer');
+var gutil = require('gulp-util');
+// var uglify = require('gulp-uglify');
+// var sourcemaps = require('gulp-sourcemaps');
+// var reactify = require('reactify');
+var sass = require('gulp-sass');
+// var fs = require('fs-extra');
+var exec = require('child_process').exec;
+var path = require('path');
+// var install = require("gulp-install");
+
+gulp.task('style', function() {
+    gulp.src('./scss/style.scss')
+        .pipe(sass().on('error', sass.logError))
+        .pipe(gulp.dest('./css'));;
+});
+
+gulp.task('style:watch', function() {
+    gulp.watch('./scss/style.scss', ['style']);
+});
+
+gulp.task('clean', function() {
+    fs.removeSync(__dirname+'/bower_components');
+    fs.removeSync(__dirname+'/lib');
+});
+
+gulp.task('install', function() {
+    // gulp.src(['./bower.json', './package.json']) // FIXME Doesn't work
+    //     .pipe(install());
+});
+
+gulp.task('bootstrap', ['install', 'style']);
+
+gulp.task('watch', ['bootstrap', 'style:watch']);
+
+gulp.task('default', ['watch']);
+
@@ -7,8 +7,6 @@
     <title>10⁵</title>
  
     <!-- CSS  -->
-    <link href="lib/material-design-icons/iconfont/material-icons.css" rel="stylesheet">
-    <link href="lib/Materialize/dist/css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection" />
     <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />
 </head>
  
@@ -0,0 +1,23 @@
+{
+  "name": "10p5-server",
+  "version": "0.0.0",
+  "description": "Client web pour le système de paiment de 10⁵",
+  "main": "gulpfile.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/GeoffreyFrogeye/10p5-server.git"
+  },
+  "author": "Le Club Info Polytech Lille <Club.Informatique@polytech-lille.fr>",
+  "license": "UNLICENSED",
+  "bugs": {
+    "url": "https://github.com/GeoffreyFrogeye/10p5-server/issues"
+  },
+  "homepage": "https://github.com/GeoffreyFrogeye/10p5-server#readme",
+  "devDependencies": {
+    "gulp": "^3.9.1",
+    "gulp-sass": "^2.3.1"
+  }
+}
+@charset "UTF-8";
+
+// Importation des Mixins de Materialize
+@import "../lib/Materialize/sass/components/mixins";
+@import "../lib/Materialize/sass/components/color";
+
+// Définition de la couleur principale de Materialize
+$primary-color: color("red", "lighten-2") !default;
+$primary-color-light: lighten($primary-color, 15%) !default;
+$primary-color-dark: darken($primary-color, 15%) !default;
+
+$secondary-color: color("indigo", "lighten-1") !default;
+$success-color: color("green", "base") !default;
+$error-color: color("pink", "base") !default;
+$link-color: color("blue", "darken-1") !default;
+
+// Import du reste de Materialize
+@import "../lib/Materialize/sass/materialize.scss";
+
+// Import des icônes Material Design
+@import "../lib/material-design-icons/iconfont/material-icons.css";
+
 body {
     display: flex;
     min-height: 100vh;