Installation du 11/07/2017 - J'ai réussi 1. $ npm init → Je fais mon fichier package.json 2. Je crée un fichier vide README.md → Inutile mais ça enlève le message d'erreur 3. $ npm install -g gulp → Créé d'un répertoire nodemodule 4. $ npm install --save-dev gulp → Installation de la dépendence 5. $ npm install --save-dev gulp-sass → Installation de la dépendence 7. $ npm install --save bourbon → installation de bourbon 8. $ npm install bootstrap@4.0.0-alpha.4 --save → 14. !!! Attention, le thème utilise en fait bootstrap 4 9. $ npm install --save bootstrap-touchspin → installation de bootstrap-touchspin 11. Modification de theme.scss (theme classic de prestashop 1.7) → Attention, ne pas mettre .scss @import "../node_modules/bourbon/app/assets/stylesheets/_bourbon"; @import "../node_modules/bootstrap/scss/bootstrap"; @import "../node_modules/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.min.css"; 12. Ajouter en haut de theme.scss : $output-bourbon-deprecation-warnings: false; → ça va désactiver les messages d'erreurs de touchspin 13. Création du fichier Gulpfiles.js → Attention aux chemins → !!! ULTRA IMPORTANT : Ne pas compiler tout le contenu du répertoire CSS mais simplement le fichier theme.css 14. $ npm install material-design-icons → Installation des fonts icones 15. $ npm install notosans-fontface --save → Installation des fonts icones 16. Dans le répertoire \assets\css créer un répertoire fonts et un répertoire iconfont → css\fonts → css\iconfonts 17. Modifier les chemins dans _fonts.scss → Exemple : url(~notosans-fontface/fonts/NotoSans-Regular.eot) devient url(fonts/NotoSans-Regular.eot) → Exemple : url(~material-design-icons/iconfont/MaterialIcons-Regular.eot) devient url(iconfont/MaterialIcons-Regular.eot) 18. $ npm install --save-dev gulp-cssmin → minifier le CSS 20. $ npm install gulp-clean-css --save-dev → minifier le CSS (je crois que le précédent gulp-cssmin fait pareil) 21. $ npm install gulp-rename --save-dev → renommer les fichiers 19. Créer un répertoire preprod dans _dev → \_dev\preprod → C'est pour créer les fichiers avec gulp avant de les copiers en "prod" ************************************* ******* WATCH ******* ************************************* $ gulp lancement → Lance le script "lancement" /* Important */ --save-dev ça sert à dire qu'on veut mettre à jour le fichier .json ************************************* ******* Fichier package.json ******* ************************************* { "name": "dngps1", "version": "1.0.0", "private": true, "description": "My first prestashop theme", "main": "webpack.config.js", "scripts": { "test": "echo 'hello'" }, "author": "Donny Nguyen", "license": "ISC", "devDependencies": { "gulp": "^3.9.1", "gulp-sass": "^3.1.0" }, "dependencies": { "bootstrap": "^4.0.0-alpha.4", "bootstrap-touchspin": "^3.1.1", "bourbon": "^4.3.4", "material-design-icons": "^3.0.1", "notosans-fontface": "^1.0.1" } } ************************************* ******* Fichier Gulpfiles.js ******* ******* Version simple ******* ************************************* var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('lancement', function() { gulp.src('css/theme.scss') .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('../assets/css/')) }); //Watch task gulp.task('default',function() { gulp.watch('css/**/*.scss',['lancement']); });