Skip to content

Instantly share code, notes, and snippets.

@chiehwen
Created August 11, 2014 20:35
Show Gist options
  • Save chiehwen/272dfbf5be292c481512 to your computer and use it in GitHub Desktop.
Save chiehwen/272dfbf5be292c481512 to your computer and use it in GitHub Desktop.
/*
Folder structure :
/frontend <-- AngularJS app
/dist <-- Production ready files
/assets
/css
/js
index.html
/src <-- Source files
/app
/assets
/common
/sass
/vendors <-- Transformed css to scss partials
_vendors.scss <-- [CURRENT FILE]
app.scss <-- Application styles
index.html
/vendors <-- Bower default installation folder
gulpfile.js
.bowerrc
bower.json
*/
// Core variables and mixins
@import "../../vendors/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/variables";
@import "../../vendors/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/mixins";
// Reset
@import "../../vendors/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/normalize";
@import "../../vendors/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/print";
// Core CSS
@import "../../vendors/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/scaffolding";
@import "../../vendors/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/type";
@import "../../vendors/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/code";
@import "../../vendors/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/grid";
@import "../../vendors/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/tables";
@import "../../vendors/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/forms";
@import "../../vendors/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/buttons";
// Components
@import "../../vendors/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/component-animations";
@import "../../vendors/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/glyphicons";
@import "../../vendors/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/dropdowns";
@import "../../vendors/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/button-groups";
@import "../../vendors/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/input-groups";
@import "../../vendors/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/navs";
@import "../../vendors/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/navbar";
@import "../../vendors/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/breadcrumbs";
@import "../../vendors/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/pagination";
@import "../../vendors/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/pager";
@import "../../vendors/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/labels";
@import "../../vendors/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/badges";
@import "../../vendors/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/jumbotron";
@import "../../vendors/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/thumbnails";
@import "../../vendors/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/alerts";
@import "../../vendors/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/progress-bars";
@import "../../vendors/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/media";
@import "../../vendors/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/list-group";
@import "../../vendors/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/panels";
@import "../../vendors/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/wells";
@import "../../vendors/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/close";
// Components w/ JavaScript
@import "../../vendors/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/modals";
@import "../../vendors/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/tooltip";
@import "../../vendors/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/popovers";
@import "../../vendors/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/carousel";
// Utility classes
@import "../../vendors/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/utilities";
@import "../../vendors/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/responsive-utilities";
// Flatly theme from Bootswatch
@import "vendors/bootstrap";
/*
Folder structure :
/frontend <-- AngularJS app
/dist <-- Production ready files
/assets
/css
/js
index.html
/src <-- Source files
/app
/assets
/common
/sass
/vendors <-- Transformed css to scss partials
_vendors.scss <-- import of all vendors
app.scss <-- [CURRENT FILE]
index.html
/vendors <-- Bower default installation folder
gulpfile.js
.bowerrc
bower.json
*/
@import "vendors";
// Your styles go here !
/*
Folder structure :
/frontend <-- AngularJS app
/dist <-- Production ready files
/assets
/css
/js
index.html
/src <-- Source files
/app
/assets
/common
/sass
/vendors <-- Transformed css to scss partials
_vendors.scss <-- import of all vendors
app.scss <-- Application styles
index.html
/vendors <-- Bower default installation folder
gulpfile.js <-- [CURRENT FILE]
.bowerrc
bower.json
*/
// Modules required
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
minifycss = require('gulp-minify-css'),
rename = require('gulp-rename');
// Copy and transform vendors' .css files to .scss partials
gulp.task('copy-css', function() {
return gulp.src(['vendors/bootswatch/flatly/bootstrap.css'/*, 'another/css/file.css'*/])
.pipe(rename({prefix: "_", extname: ".scss"}))
.pipe(gulp.dest('src/sass/vendors'));
});
// Compile and minify app.scss file to app.min.css
gulp.task('styles', ['copy-css'], function() {
return gulp.src('src/sass/app.scss')
.pipe(sass())
.pipe(minifycss())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('dist/css'));
});
// Watch for .scss changes in src/sass folder
gulp.task('watch', function() {
gulp.watch('src/sass/**/*.scss', ['styles']);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment