From 770979c0146271cb41d57b92255bd20d465bef7a Mon Sep 17 00:00:00 2001 From: sipp11 Date: Thu, 19 Nov 2015 20:51:39 +0700 Subject: [PATCH] Add bower + foundation --- .gitignore | 1 + bower.json | 23 +++++++++++++++++++++++ gulpfile.js | 14 +++++++++++++- index.html | 2 +- package.json | 1 + scss/style.scss | 42 ++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 81 insertions(+), 2 deletions(-) create mode 100644 bower.json create mode 100644 scss/style.scss diff --git a/.gitignore b/.gitignore index 825fc67..3d18386 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ node_modules .DS_Store npm-debug.log +bower_components diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..e9b22ae --- /dev/null +++ b/bower.json @@ -0,0 +1,23 @@ +{ + "name": "expensy-react", + "description": "Seed project for React, Browserify, Rework SPAs", + "main": "app.js", + "authors": [ + "sipp11 " + ], + "license": "MIT", + "moduleType": [ + "es6" + ], + "homepage": "", + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ], + "dependencies": { + "foundation": "~5.5.3" + } +} diff --git a/gulpfile.js b/gulpfile.js index 41ce8aa..c0cf300 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -6,6 +6,7 @@ var babelify = require('babelify'); var watchify = require('watchify'); var notify = require('gulp-notify'); +var sass = require('gulp-sass'); var stylus = require('gulp-stylus'); var autoprefixer = require('gulp-autoprefixer'); var uglify = require('gulp-uglify'); @@ -31,8 +32,18 @@ gulp.task('styles',function() { gulp.src('css/style.styl') .pipe(stylus()) .pipe(autoprefixer()) - .pipe(gulp.dest('./build/css/')) + .pipe(gulp.dest('./build')) .pipe(reload({stream:true})) + + gulp.src('scss/*.scss') + .pipe(sass({ + includePaths: ['bower_components/foundation/scss'] + })) + .pipe(stylus()) + .pipe(autoprefixer()) + .pipe(gulp.dest('./build/css')) + .pipe(reload({stream:true})) + }); /* @@ -107,5 +118,6 @@ gulp.task('scripts', function() { // run 'scripts' task first, then watch for future changes gulp.task('default', ['images','styles','scripts','browser-sync'], function() { gulp.watch('css/**/*', ['styles']); // gulp watch for stylus changes + gulp.watch('scss/**/*', ['styles']); // gulp watch for stylus changes return buildScript('app.jsx', true); // browserify watch for JS changes }); diff --git a/index.html b/index.html index af6ccff..136be84 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ React Browserify SPA seed - + diff --git a/package.json b/package.json index 3ed262f..9e44593 100644 --- a/package.json +++ b/package.json @@ -54,6 +54,7 @@ "gulp-autoprefixer": "^3.1.0", "gulp-notify": "^2.2.0", "gulp-rename": "^1.2.2", + "gulp-sass": "^2.1.0", "gulp-stylus": "^2.1.0", "gulp-uglify": "^1.5.1", "gulp-util": "^3.0.7", diff --git a/scss/style.scss b/scss/style.scss new file mode 100644 index 0000000..41bb47e --- /dev/null +++ b/scss/style.scss @@ -0,0 +1,42 @@ +// Foundation by ZURB +// foundation.zurb.com +// Licensed under MIT Open Source + +// Behold, here are all the Foundation components. +@import 'foundation/components/grid'; +@import 'foundation/components/accordion'; +@import 'foundation/components/alert-boxes'; +@import 'foundation/components/block-grid'; +@import 'foundation/components/breadcrumbs'; +@import 'foundation/components/button-groups'; +@import 'foundation/components/buttons'; +@import 'foundation/components/clearing'; +@import 'foundation/components/dropdown'; +@import 'foundation/components/dropdown-buttons'; +@import 'foundation/components/flex-video'; +@import 'foundation/components/forms'; +@import 'foundation/components/icon-bar'; +@import 'foundation/components/inline-lists'; +@import 'foundation/components/joyride'; +@import 'foundation/components/keystrokes'; +@import 'foundation/components/labels'; +@import 'foundation/components/magellan'; +@import 'foundation/components/orbit'; +@import 'foundation/components/pagination'; +@import 'foundation/components/panels'; +@import 'foundation/components/pricing-tables'; +@import 'foundation/components/progress-bars'; +@import 'foundation/components/range-slider'; +@import 'foundation/components/reveal'; +@import 'foundation/components/side-nav'; +@import 'foundation/components/split-buttons'; +@import 'foundation/components/sub-nav'; +@import 'foundation/components/switches'; +@import 'foundation/components/tables'; +@import 'foundation/components/tabs'; +@import 'foundation/components/thumbs'; +@import 'foundation/components/tooltips'; +@import 'foundation/components/top-bar'; +@import 'foundation/components/type'; +@import 'foundation/components/offcanvas'; +@import 'foundation/components/visibility';