Introducing gulp build system for Web Assets
authorPablo Vazquez <venomgfx@gmail.com>
Wed, 9 Dec 2015 00:37:36 +0000 (01:37 +0100)
committerPablo Vazquez <venomgfx@gmail.com>
Wed, 9 Dec 2015 00:37:36 +0000 (01:37 +0100)
Also add a class if we're on small screens, for basic mobile styling.

Gruntfile.js [deleted file]
gulpfile.js [new file with mode: 0644]
index.html
js/interactive.js
js/interactive.min.js [deleted file]
js/min/interactive.min.js [new file with mode: 0644]
package.json
sass/main.sass

diff --git a/Gruntfile.js b/Gruntfile.js
deleted file mode 100644 (file)
index 1e2c11a..0000000
+++ /dev/null
@@ -1,47 +0,0 @@
-module.exports = function(grunt) {
-    grunt.initConfig({
-        pkg: grunt.file.readJSON('package.json'),
-
-        sass: {
-            dist: {
-                options: {
-                    style: 'compressed'
-                },
-                files: {
-                    'css/main.css': 'sass/main.sass'
-                }
-            }
-        },
-
-        autoprefixer: {
-            no_dest: { src: 'css/main.css' }
-        },
-
-        uglify: {
-            main : {
-              src : 'js/interactive.js',
-              dest : 'js/interactive.min.js'
-            },
-        },
-
-        watch: {
-            files: [
-                'index.html',
-                'sass/main.sass',
-                'sass/_base.sass',
-                'sass/_helpers.sass'],
-            tasks: ['sass', 'autoprefixer', 'uglify'],
-            js:  { files: 'js/interactive.js', tasks: [ 'uglify' ] },
-            options: {
-              livereload: true,
-            },
-        }
-    });
-
-    grunt.loadNpmTasks('grunt-contrib-sass');
-    grunt.loadNpmTasks('grunt-contrib-watch');
-    grunt.loadNpmTasks('grunt-autoprefixer');
-    grunt.loadNpmTasks('grunt-contrib-uglify');
-
-    grunt.registerTask('default', ['sass', 'autoprefixer', 'uglify']);
-};
diff --git a/gulpfile.js b/gulpfile.js
new file mode 100644 (file)
index 0000000..27fd5c9
--- /dev/null
@@ -0,0 +1,48 @@
+var gulp          = require('gulp'),
+    plumber       = require('gulp-plumber'),
+    sass          = require('gulp-sass'),
+    sourcemaps    = require('gulp-sourcemaps'),
+    autoprefixer  = require('gulp-autoprefixer'),
+    uglify        = require('gulp-uglify'),
+    rename        = require('gulp-rename'),
+    livereload    = require('gulp-livereload');
+
+
+/* CSS */
+gulp.task('styles', function() {
+    gulp.src('sass/**/*.sass')
+        .pipe(plumber())
+        .pipe(sourcemaps.init())
+        .pipe(sass({
+            outputStyle: 'compressed'}
+            ))
+        .pipe(autoprefixer("last 3 version", "safari 5", "ie 8", "ie 9"))
+        .pipe(sourcemaps.write('.'))
+        .pipe(gulp.dest('css/'))
+        .pipe(livereload());
+});
+
+
+/* Individual Uglified Scripts */
+gulp.task('scripts', function() {
+    gulp.src('js/*.js')
+        .pipe(sourcemaps.init())
+        .pipe(uglify())
+        .pipe(rename({suffix: '.min'}))
+        .pipe(sourcemaps.write("."))
+        .pipe(gulp.dest('js/min/'))
+        .pipe(livereload());
+});
+
+
+// While developing, run 'gulp watch'
+gulp.task('watch',function() {
+    livereload.listen();
+
+    gulp.watch('sass/**/*.sass',['styles']);
+    gulp.watch('js/*.js',['scripts']);
+});
+
+
+// Run 'gulp' to build everything at once
+gulp.task('default', ['styles', 'scripts']);
index a482c1a66f173a4e1f306cbe94beae7807e999a6..d88fb7f92d123bb757e172c754508ba6e5ef20e8 100644 (file)
 
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
                <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
-               <script src="js/interactive.min.js"></script>
+               <script src="js/min/interactive.min.js"></script>
                <script type="text/javascript">
                        $('#can_i_haz_popover').popover();
                </script>
index c782ead4a03f494d53191638843cd9b42ef8e521..aee5166f138bea877f80627ec683a302d67b593d 100644 (file)
@@ -56,10 +56,26 @@ function RowSameHeight() {
        });
 };
 
+function isMobile() {
+       var is_mobile = window.matchMedia("only screen and (max-width: 760px)");
+
+       if (is_mobile.matches) {
+               $('header.navbar.navbar-transparent').addClass('is-mobile');
+       } else {
+               $('header.navbar.navbar-transparent').removeClass('is-mobile');
+       }
+};
+
 function NavbarTransparent() {
 
+       isMobile();
+
        var startingpoint = 80;
 
+       $(window).on("resize", function () {
+               isMobile();
+       });
+
        $(window).on("scroll", function () {
                if ($(this).scrollTop() > startingpoint) {
                        $('.navbar-overlay, .navbar-transparent').addClass('is-active');
diff --git a/js/interactive.min.js b/js/interactive.min.js
deleted file mode 100644 (file)
index 537822c..0000000
+++ /dev/null
@@ -1 +0,0 @@
-function RowSameHeight(){$(".row-same-height").each(function(){var a=-(1/0);$(this).find("div[class^='col-']").each(function(){var b=$(this).height();a=Math.max(a,parseFloat(b)),$(this).children(".box").css("height",a)})})}function NavbarTransparent(){var a=80;$(window).on("scroll",function(){$(this).scrollTop()>a?$(".navbar-overlay, .navbar-transparent").addClass("is-active"):$(".navbar-overlay, .navbar-transparent").removeClass("is-active")})}$(".flip-it").click(function(){$(this).closest(".card").toggleClass("flipped")}),$(".flip_toggle").each(function(){$(this).parent().find(".front").height()>$(this).parent().find(".back").height()&&$(this).parent().height($(this).parent().find(".front").height())}),NavbarTransparent();
\ No newline at end of file
diff --git a/js/min/interactive.min.js b/js/min/interactive.min.js
new file mode 100644 (file)
index 0000000..9fed9e3
--- /dev/null
@@ -0,0 +1,2 @@
+function RowSameHeight(){$(".row-same-height").each(function(){var a=-(1/0);$(this).find("div[class^='col-']").each(function(){var i=$(this).height();a=Math.max(a,parseFloat(i)),$(this).children(".box").css("height",a)})})}function isMobile(){var a=window.matchMedia("only screen and (max-width: 760px)");a.matches?$("header.navbar.navbar-transparent").addClass("is-mobile"):$("header.navbar.navbar-transparent").removeClass("is-mobile")}function NavbarTransparent(){isMobile();var a=80;$(window).on("resize",function(){isMobile()}),$(window).on("scroll",function(){$(this).scrollTop()>a?$(".navbar-overlay, .navbar-transparent").addClass("is-active"):$(".navbar-overlay, .navbar-transparent").removeClass("is-active")})}$(".flip-it").click(function(){$(this).closest(".card").toggleClass("flipped")}),$(".flip_toggle").each(function(){$(this).parent().find(".front").height()>$(this).parent().find(".back").height()&&$(this).parent().height($(this).parent().find(".front").height())}),NavbarTransparent();
+//# sourceMappingURL=interactive.min.js.map
\ No newline at end of file
index cb7ed8d2cd1b569cf4e862b569c6af738de9f371..678818f8b5b79cd1425f6ba98dfef3a025227f22 100644 (file)
@@ -7,10 +7,14 @@
   "author": "Blender Foundation",
   "license": "GPL",
   "devDependencies": {
-    "grunt": "~0.4.5",
-    "grunt-autoprefixer": "~1.0.1",
-    "grunt-contrib-sass": "~0.9.2",
-    "grunt-contrib-watch": "~0.6.1",
-    "grunt-contrib-uglify": "~0.9.1"
+    "gulp": "~3.9.0",
+    "gulp-sass": "~2.0.4",
+    "gulp-autoprefixer": "~2.3.1",
+    "gulp-sourcemaps": "~1.5.2",
+    "gulp-plumber": "~1.0.1",
+    "gulp-livereload": "~3.8.0",
+    "gulp-uglify": "~1.4.0",
+    "gulp-rename": "~1.2.2",
+    "gulp-chmod": "~1.3.0"
   }
 }
index 9a65e37ce0985848ce6d166c5f6653583a463cd0..f1bcf97e6bab6248cb275dac8fe2eda042f06cd1 100644 (file)
@@ -776,6 +776,29 @@ label
 
        transition: background-color 100ms ease-in-out
 
+       &.is-mobile
+               background:
+                       color: white
+                       image: none
+
+               .navbar-header
+                       padding-top: 0
+
+                       a.logo
+                               margin:
+                                       top: 5px
+                                       left: 0
+
+                       .navbar-toggle
+                               margin:
+                                       top: 5px
+                                       bottom: 5px
+
+               & .nav
+                       & li a
+                               color: $color_text
+                               padding-top: 20px
+
        &.is-active
                background:
                        color: white
@@ -944,6 +967,7 @@ ul.nav.navbar-nav.navbar-left
                +media-sm
                        margin: 10px 0 10px -15px
                        font-size: 110%
+
        /* Otherwise navbars with many items overlap the Email on BID enabled sites */
 
 .navbar-toggle