• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

rmdias/gulp-web-app-workflow: Boilerplate from web app using Gulp.JS

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

rmdias/gulp-web-app-workflow

开源软件地址(OpenSource Url):

https://github.com/rmdias/gulp-web-app-workflow

开源编程语言(OpenSource Language):

CSS 53.7%

开源软件介绍(OpenSource Introduction):

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.







鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap