Tag Archives: Gulp

Gulp – Handle page reload in gulp-connect using connect-history-api-fallback

Page reload doesn’t work after enabled the html5mode. We have to rewrite the url and it could be easily done by using a middleware for the connect server.

gulpfile.js

var connect            = require('gulp-connect');
var historyApiFallback = require('connect-history-api-fallback');

gulp.task('connect', function() {
  connect.server({
    middleware: function(connect, opt) {
      return [ historyApiFallback({}) ];
    }
  });
});

 

Done =)

Reference: GitHub – bripkens/connect-history-api-fallback

Gulp – Rewrite source files instead of creating new files

I would like to minified the .js files of the bower packages in my project. Usually, gulp will read the source files and the pipe them into new files but this time i would like to overwrite the original file without creating a .min.js file.

Example:

gulp.task('jsmin', function() {
  return gulp.src('bower_components/**/*.js', {base: './'})
    .pipe(sourcemaps.init())
      .pipe(uglify())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./'));
});

 

The above task will read those .js files inside the bower_components folder, uglify the source file and create the corresponding .map file for each .js file in the same folder.

Done =)

Reference: StackOverflow – Can Gulp overwrite all src files?

Drupal 7 – Setup Bootstrap 3 Theme with Gulp for LESS compilation

Got a new responsive site freelance and i would like to try Bootstrap 3 theme in Drupal 7. A little bit confused at the very beginning because the theme has a lot of features and bug fixes ongoing. So the documentation is a bit lacking and i have to make some trials and errors before knowing what to do.

Some Drupal developers may also have problem on compiling LESS. So here i include a gulp script and some NodeJS packages to help.

Assume you have setup the Drupal 7.

1. Download the Bootstrap 3 Drupal theme. The current stable version is 7.x-3.0 which is a bit old and only works with Bootstrap 3.0.x. I am going to use 7.x-3.1 which supports the latest Bootstrap version (v3.3.2 at the moment i write this post). The 7.x-3.1 is still in beta (7.x-3.1-beta2). You could download it from the releases listing page.

2. Extract the Bootstrap 3 base theme to the sites/all/themes folder. You would found the starterkits folder containing the subthemes. as follow. Continue reading Drupal 7 – Setup Bootstrap 3 Theme with Gulp for LESS compilation