brunoskonrad/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Estrutura de Diretório


/app - Onde ficará o seu código. Trabalhe aqui dentro.

css - Onde ficará o seu código SASS. Organize a sua maneira respeitando o main.scss como o principal;
js - Onde ficará o seu código JS e React. Respeite o arquivo app.jsx como o principal;
index.html - a base do seu HTML. Seguir o snippet do gist;


/dist - É auto gerado pelo Gulp. Não se preocupe em alterar aqui. Não deve ser versionado.
package.json - no gist tem as dependências base que precisa.
gulpfile.js - arquivo para automatizar os processamentos e auxiliar o desenvolvimento.

Gulp


gulp: inicia o ambiente de desenvolvimento abrindo a página localhost:8000 e fazendo o livereload a cada alteração que fizer.
gulp deploy: cria a pasta dist independentemente.


## gulpfile.js
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var reactify = require('reactify');
var sass = require('gulp-sass');
var webserver = require('gulp-webserver');

var PATH = {
  OUTPUT_DEST: 'dist',
  JS: {
    ENTRY: 'app/js/app.jsx',
    APLICATION: 'app/js/**/*',
    OUTPUT_NAME: 'bundle.js'
  },
  HTML: {
    ENTRY: 'app/index.html'
  },
  CSS: {
    ENTRY: 'app/css/main.scss',
    APLICATION: 'app/css/*/**.scss',
    OUTPUT_NAME: 'main.css'
  }
}

gulp.task('build:js', function() {
  return browserify({
    entries: [PATH.JS.ENTRY]
  }).bundle()
    .pipe(source(PATH.JS.OUTPUT_NAME))
    .pipe(gulp.dest(PATH.OUTPUT_DEST));
});

gulp.task('build:html', function() {
  gulp.src(PATH.HTML.ENTRY)
    .pipe(gulp.dest(PATH.OUTPUT_DEST));
});

gulp.task('build:css', function() {
  gulp.src(PATH.CSS.ENTRY)
    .pipe(sass({outputStyle: 'compressed'}))
    .pipe(gulp.dest(PATH.OUTPUT_DEST));
});

gulp.task('webserver', function() {
  gulp.src(PATH.OUTPUT_DEST)
    .pipe(webserver({
      open: true,
      livereload: true
    }));
});

gulp.task('build', ['build:html', 'build:css', 'build:js']);

gulp.task('watch', function() {
  gulp.watch(PATH.JS.APLICATION, ['build:js']);
  gulp.watch(PATH.CSS.APLICATION, ['build:css']);
  gulp.watch(PATH.HTML.ENTRY, ['build:html']);
});

gulp.task('deploy', ['build']);

gulp.task('default', ['build', 'watch', 'webserver']);

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>{Seu título aí}</title>
  <link rel="stylesheet" href="main.css" />
</head>
<body>
  <div data-app></div>
  <script src="bundle.js"></script>
</body>
</html>

## package.json
{
  "dependencies": {
    "react": "^0.13.3"
  },
  "devDependencies": {
    "browserify": "^11.0.1",
    "gulp": "^3.9.0",
    "gulp-sass": "^2.0.4",
    "gulp-webserver": "^0.9.1",
    "reactify": "^1.1.1",
    "vinyl-source-stream": "^1.1.0"
  },
  "browserify": {
    "transform": [
      "reactify"
    ]
  }
}
	var gulp = require('gulp');
	var source = require('vinyl-source-stream');
	var browserify = require('browserify');
	var reactify = require('reactify');
	var sass = require('gulp-sass');
	var webserver = require('gulp-webserver');

	var PATH = {
	OUTPUT_DEST: 'dist',
	JS: {
	ENTRY: 'app/js/app.jsx',
	APLICATION: 'app/js/*/',
	OUTPUT_NAME: 'bundle.js'
	},
	HTML: {
	ENTRY: 'app/index.html'
	},
	CSS: {
	ENTRY: 'app/css/main.scss',
	APLICATION: 'app/css//*.scss',
	OUTPUT_NAME: 'main.css'
	}
	}

	gulp.task('build:js', function() {
	return browserify({
	entries: [PATH.JS.ENTRY]
	}).bundle()
	.pipe(source(PATH.JS.OUTPUT_NAME))
	.pipe(gulp.dest(PATH.OUTPUT_DEST));
	});

	gulp.task('build:html', function() {
	gulp.src(PATH.HTML.ENTRY)
	.pipe(gulp.dest(PATH.OUTPUT_DEST));
	});

	gulp.task('build:css', function() {
	gulp.src(PATH.CSS.ENTRY)
	.pipe(sass({outputStyle: 'compressed'}))
	.pipe(gulp.dest(PATH.OUTPUT_DEST));
	});

	gulp.task('webserver', function() {
	gulp.src(PATH.OUTPUT_DEST)
	.pipe(webserver({
	open: true,
	livereload: true
	}));
	});

	gulp.task('build', ['build:html', 'build:css', 'build:js']);

	gulp.task('watch', function() {
	gulp.watch(PATH.JS.APLICATION, ['build:js']);
	gulp.watch(PATH.CSS.APLICATION, ['build:css']);
	gulp.watch(PATH.HTML.ENTRY, ['build:html']);
	});

	gulp.task('deploy', ['build']);

	gulp.task('default', ['build', 'watch', 'webserver']);
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>{Seu título aí}</title>
	<link rel="stylesheet" href="main.css" />
	</head>
	<body>
	<div data-app></div>
	<script src="bundle.js"></script>
	</body>
	</html>
	{
	"dependencies": {
	"react": "^0.13.3"
	},
	"devDependencies": {
	"browserify": "^11.0.1",
	"gulp": "^3.9.0",
	"gulp-sass": "^2.0.4",
	"gulp-webserver": "^0.9.1",
	"reactify": "^1.1.1",
	"vinyl-source-stream": "^1.1.0"
	},
	"browserify": {
	"transform": [
	"reactify"
	]
	}
	}