├── .editorconfig ├── .gitignore ├── .jshintrc ├── LICENSE ├── README.md ├── gulp-ps.png ├── gulpfile.js ├── package.json └── prestashop-sass.gif /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | 8 | [*] 9 | 10 | # Change these settings to your own preference 11 | indent_style = space 12 | indent_size = 4 13 | 14 | # We recommend you to keep these unchanged 15 | end_of_line = lf 16 | charset = utf-8 17 | trim_trailing_whitespace = true 18 | insert_final_newline = true 19 | 20 | [*.md] 21 | trim_trailing_whitespace = false 22 | 23 | [package.json] 24 | indent_style = space 25 | indent_size = 2 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | prestashop/themes/default-bootstrap/sass 3 | prestashop/themes/default-bootstrap/css 4 | prestashop/themes/default-bootstrap/js 5 | .sass-cache -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "node": true, 3 | "esnext": false, 4 | "bitwise": false, 5 | "curly": false, 6 | "eqeqeq": true, 7 | "eqnull": true, 8 | "immed": true, 9 | "latedef": true, 10 | "newcap": true, 11 | "noarg": true, 12 | "undef": true, 13 | "strict": false, 14 | "trailing": true, 15 | "smarttabs": true, 16 | "indent": 4, 17 | "globals": { 18 | "$": false, 19 | "document" : false, 20 | "window" : false 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Dustin Deus 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![gulp prestashop power](https://raw.githubusercontent.com/StarpTech/gulp-prestashop/master/gulp-ps.png) 2 | 3 | # Description 4 | 5 | Gulp-prestashop makes the development of high quality themes much easier. Prestashop delivers all css files with it's SASS equivalent. You can develop your theme in a productive way (since Prestashop 1.6). The problem, however, nobody has used it before and the workflow isn't documented. I want to provide an easy way to build your SASS files instantly. You can watch for changes and gulp will automatically recompiles your files. Also linting of javascript files is supported. The project is at a very early stage but I hope you can see the benefits. 6 | 7 | ![gulp sass build process](https://raw.githubusercontent.com/StarpTech/gulp-prestashop/b9ed5e9f8d89cd5ac26378d170a95cb69199b8aa/prestashop-sass.gif) 8 | ## Getting Started 9 | 10 | Install dependencies: 11 | 12 | + Install Ruby (For windows http://rubyinstaller.org/) 13 | + ```gem install sass``` 14 | + ```gem install compass``` 15 | + ```npm install``` 16 | 17 | Install [Gulp](https://github.com/gulpjs/gulp/) globally to run the tasks instantly in the console ```npm install -g gulp``` 18 | 19 | ## Usage 20 | 21 | ### 1. Specifiy your project paths in the gulpfile.js 22 | + ```var psProjectDir; // Your root prestashop dir (e.g prestashop)``` 23 | + ```var themeName; // Your active theme (e.g default-bootstrap)``` 24 | 25 | ### Tasks 26 | 27 | #### Run the default task and watch all files 28 | ```bash 29 | $ gulp 30 | ``` 31 | 32 | #### Run just linting 33 | ```bash 34 | $ gulp lint 35 | ``` 36 | 37 | #### Run just sass 38 | ```bash 39 | $ gulp sass 40 | ``` 41 | 42 | ## Copyright 43 | 44 | Copyright 2014 [Dustin Deus](http://blog.starptech.de/). See [MIT-LICENCE](https://github.com/StarpTech/gulp-prestashop/blob/master/LICENSE) for details. 45 | -------------------------------------------------------------------------------- /gulp-ps.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StarpTech/gulp-prestashop/d5c6dff135c2ba95432a6e2194b952566d5ca656/gulp-ps.png -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // Include gulp 4 | var gulp = require('gulp'); 5 | 6 | // Include Our Plugins 7 | var jshint = require('gulp-jshint'); 8 | var stylish = require('jshint-stylish'); 9 | var sass = require('gulp-ruby-sass'); 10 | var path = require('path'); 11 | var minifycss = require('gulp-minify-css'); 12 | var changed = require('gulp-changed'); 13 | 14 | //General 15 | var psProjectDir = 'prestashop'; 16 | var themeName = 'default-bootstrap'; 17 | var projectDir = path.resolve(__dirname); 18 | 19 | var paths = { 20 | prestashopSassFiles: './' + psProjectDir + '/themes/default-bootstrap/sass/**/*.scss', 21 | prestashopCssDir: './' + psProjectDir + '/themes/default-bootstrap/css', 22 | prestashopJsFiles: './' + psProjectDir + '/themes/default-bootstrap/js/**/*.js', 23 | prestashopJsDir: './' + psProjectDir + '/themes/default-bootstrap/js/' 24 | }; 25 | var sassConfig = { 26 | style: 'expanded', 27 | compass: true, 28 | loadPath: [projectDir + '/prestashop/themes/'+ themeName +'/sass'] 29 | }; 30 | 31 | /* 32 | * Custom routine to cancel gulp when jshint is failed 33 | * (Currently not implemented in gulp-jshint :/) 34 | */ 35 | var map = require('map-stream'); 36 | var exitOnJshintError = map(function (file, cb) { 37 | if (!file.jshint.success) { 38 | console.error('jshint failed'); 39 | process.exit(1); 40 | } 41 | }); 42 | 43 | /* Task 44 | * Lint all prestashop theme javascript files 45 | */ 46 | gulp.task('lint', function() { 47 | return gulp.src(paths.prestashopJsFiles) 48 | .pipe(jshint()) 49 | .pipe(jshint.reporter('jshint-stylish')) 50 | .pipe(exitOnJshintError); 51 | }); 52 | 53 | /* Task 54 | * Compile our prestashop SASS files 55 | */ 56 | gulp.task('sass', function() { 57 | return gulp.src(paths.prestashopSassFiles) 58 | .pipe(changed(paths.prestashopCssDir,{ extension: '.css' })) 59 | .pipe(sass(sassConfig)) 60 | .pipe(gulp.dest(paths.prestashopCssDir)); 61 | }); 62 | 63 | /* Task 64 | * Watch Files For Changes 65 | */ 66 | gulp.task('watch', function() { 67 | gulp.watch(paths.prestashopJsFiles, ['lint']); 68 | gulp.watch(paths.prestashopSassFiles, ['sass']); 69 | }); 70 | 71 | // Default Task 72 | gulp.task('default', ['lint', 'sass', 'watch']); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gulp-prestashop", 3 | "version": "0.0.0", 4 | "dependencies": {}, 5 | "devDependencies": { 6 | "gulp": "^3.8.5", 7 | "gulp-changed": "^0.4.0", 8 | "gulp-jshint": "^1.6.4", 9 | "gulp-minify-css": "^0.3.6", 10 | "gulp-ruby-sass": "^0.6.0", 11 | "gulp-uglify": "^0.3.1", 12 | "jshint-stylish": "^0.4.0", 13 | "map-stream": "^0.1.0" 14 | }, 15 | "engines": { 16 | "node": ">=0.10.0" 17 | }, 18 | "description": "Prestashop build system for linting and creating your prestashop theme.", 19 | "main": "gulpfile.js", 20 | "scripts": { 21 | "test": "echo \"Error: no test specified\" && exit 1" 22 | }, 23 | "keywords": [ 24 | "prestashop", 25 | "gulp-prestashop", 26 | "prestashop-build-system", 27 | "prestashop-scss" 28 | ], 29 | "author": "Dustin Deus", 30 | "license": "MIT" 31 | } 32 | -------------------------------------------------------------------------------- /prestashop-sass.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StarpTech/gulp-prestashop/d5c6dff135c2ba95432a6e2194b952566d5ca656/prestashop-sass.gif --------------------------------------------------------------------------------