Boilerplate from web app using Gulp.JS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
assets
css
img
js
.gitignore
.htaccess
404.html
CONTRIBUTING.md
README.md
apple-touch-icon-precomposed.png
crossdomain.xml
favicon.ico
gulpfile.js
humans.txt
index.html
package.json
robots.txt

README.md

Gulp Web App Workflow

Boilerplate from web app using Gulp.JS

Class Gulp

gulp.js - The streaming build system

We use:

Usage

  1. Clone this repository:

     https://github.com/rmdias/gulp-web-app-workflow.git
    
  2. Install Gulp dependencies:

     npm install
    
  • And now you already have the gulp workflow installed \o/

Folders Structure

Your editable files are in /assets folder. And content of folders that are in index will be generated automatically.

The basic structure of the project is:

.
|--/assets
|--|--/html
|--|--/sass
|--|--/js
|--|--/img
|--/css
|--/fonts
|--/img
|--/js
|--index.html
|--package.json
|--gulpfile.js

The package.json

{
  "name": "Gulp-web-app-workflow",
  "version": "0.0.1",
  "description": "Boilerplate from web app using Gulp.JS",
  "main": "index.html",
  "author": "Rodolfo Dias",
  "license": "BSD",
  "devDependencies": {
    "gulp-util": "~2.2.9",
    "gulp-uglify": "~0.1.0",
    "gulp-sass": "~0.2.3",
    "gulp-concat": "~2.1.7",
    "gulp-ruby-sass": "~0.1.1",
    "gulp-minify-html": "~0.1.0",
    "gulp-imagemin": "~0.1.4",
    "gulp-jshint": "~1.3.4",
    "map-stream": "~0.1.0"
  }
}

The gulpfile.js

Any file that you put in your production folder will be compiled automatically. HTML, SASS, JS or images does not matter.

var gulp = require('gulp');

// package.json
var pkg = require('./package.json');

//plugins
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var jshint = require('gulp-jshint');
var sass = require('gulp-ruby-sass');
var minifyHtml = require('gulp-minify-html');
var imagemin = require('gulp-imagemin');
var map = require('map-stream');


// jshint reporter
var myReporter = map(function (file, cb) {

  if (!file.jshint.success) {
    console.log('JSHINT fail in ' + file.path);
    file.jshint.results.forEach(function (err) {
      if (err) {
        console.log(' '+ file.path + ': line ' + err.line + ', col ' + err.character + ', code ' + err.code + ', ' + err.reason);
      }
    });
  }

  if (file.jshint.errorCount !== undefined) {
    console.log('Your project have ' + file.jshint.errorCount + ' errors...');  
  } else{
    console.log('Your project have 0 errors...');  
  };
  
  cb(null, file);
});


// tasks
gulp.task('build', function(){
 
  // { concat, minify & jshint }
  var scriptFiles = './assets/js/**/*.js';
  var scriptDist = './js';
  
  gulp.src(scriptFiles)
      .pipe(jshint())
      .pipe(myReporter)
      .pipe(concat('all.min.js'))
      .pipe(uglify())
      .pipe(gulp.dest(scriptDist));


  // { sass }
  var sassFiles = './assets/sass/all.sass';
  var sassDist = './css';

  gulp.src(sassFiles)
      .pipe(concat('all.min.sass'))
      .pipe(sass({unixNewlines: true, style: 'compressed'}))
      .pipe(gulp.dest(sassDist));


  // { image optimizer }
  var imageFiles = './assets/img/**/*';
  var imageDist = './img';
  gulp.src(imageFiles)
        .pipe(imagemin())
        .pipe(gulp.dest(imageDist));


  // { html }
  var hmltFiles = './assets/html/**/*.html';
  var htmlDist = './';

  gulp.src(hmltFiles)
    .pipe(minifyHtml())
    .pipe(gulp.dest(htmlDist));

});

// The default task (called when you run `gulp`)
gulp.task('default', function() {
  gulp.run('build');

  // Watch files and run tasks if they change
  gulp.watch('./assets/**/*', function() {
    var date = new Date(), hour = date.getHours(), minutes = date.getMinutes(), seconds = date.getSeconds(),
        buildTime = hour + ':' + minutes + ':' + seconds;

    gulp.run('build');

    console.log('------------- END -------------', buildTime);
  });
});


And now is only run the gulp and be happy

	gulp


## Contributing

Check CONTRIBUTING.md.