gastonambrogi/.gitignore

## .gitignore
dist/

## README.md

      
    Raw
  

              README.md
            
          
    Arma un directorio así:

  .gitignore
  package.json
  gulpfile.js
  dist/
  app/
    css
    fonts
    images
    index.html
    js
    scss/
      reset.scss
      styles.scss

Y ejecuta npm install

Despues de eso correr gulp para desarrollo y gulp build para buildear.


## gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var useref = require('gulp-useref');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var cssnano = require('gulp-cssnano');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
var del = require('del');
var runSequence = require('run-sequence');

// Basic Gulp task syntax
gulp.task('hello', function() {
  console.log('Hello Zell!');
})

// Development Tasks
// -----------------

// Start browserSync server
gulp.task('browserSync', function() {
  browserSync({
    server: {
      baseDir: 'app'
    }
  })
})

gulp.task('sass', function() {
  return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss and children dirs
    .pipe(sass().on('error', sass.logError)) // Passes it through a gulp-sass, log errors to console
    .pipe(gulp.dest('app/css')) // Outputs it in the css folder
    .pipe(browserSync.reload({ // Reloading with Browser Sync
      stream: true
    }));
})

// Watchers
gulp.task('watch', function() {
  gulp.watch('app/scss/**/*.scss', ['sass']);
  gulp.watch('app/*.html', browserSync.reload);
  gulp.watch('app/js/**/*.js', browserSync.reload);
})

// Optimization Tasks
// ------------------

// Optimizing CSS and JavaScript
gulp.task('useref', function() {

  return gulp.src('app/*.html')
    .pipe(useref())
    .pipe(gulpIf('*.js', uglify()))
    .pipe(gulpIf('*.css', cssnano()))
    .pipe(gulp.dest('dist'));
});

// Optimizing Images
gulp.task('images', function() {
  return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
    // Caching images that ran through imagemin
    .pipe(cache(imagemin({
      interlaced: true,
    })))
    .pipe(gulp.dest('dist/images'))
});

// Copying fonts
gulp.task('fonts', function() {
  return gulp.src('app/fonts/**/*')
    .pipe(gulp.dest('dist/fonts'))
})

// Cleaning
gulp.task('clean', function() {
  return del.sync('dist').then(function(cb) {
    return cache.clearAll(cb);
  });
})

gulp.task('clean:dist', function() {
  return del.sync(['dist/**/*', '!dist/images', '!dist/images/**/*']);
});

// Build Sequences
// ---------------

gulp.task('default', function(callback) {
  runSequence(['sass', 'browserSync'], 'watch',
    callback
  )
})

gulp.task('build', function(callback) {
  runSequence(
    'clean:dist',
    'sass',
    ['useref', 'images', 'fonts'],
    callback
  )
})

## index.html
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--build:css css/styles.min.css-->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/styles.css">
    <!--endbuild-->
  </head>

  <body>
    <!-- ACA ES DONDE DESARROLLAS, EL RESTO NO SE TOCA -->

    <!--build:js js/main.min.js -->
    <!-- <script src="js/main.js"></script>  -->
    <!-- endbuild -->
  </body>

</html>

## package.json
{
  "name": "site",
  "version": "0.0.1",
  "description": "Site Description ",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Gastón Ambrogi",
  "license": "MIT",
  "devDependencies": {
    "browser-sync": "^2.26.0",
    "del": "^3.0.0",
    "gulp": "^3.9.1",
    "gulp-cache": "^1.0.2",
    "gulp-imagemin": "^4.1.0",
    "gulp-sass": "^4.0.1",
    "gulp-uglify": "^3.0.1",
    "gulp-useref": "^3.1.5",
    "run-sequence": "^2.2.1",
    "gulp-cssnano": "^2.1.3"
  }
}

## reset.scss
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	box-sizing: border-box;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

## styles.scss
@import 'DE_CADA_COMPONENTE.scss';
	var gulp = require('gulp');
	var sass = require('gulp-sass');
	var browserSync = require('browser-sync');
	var useref = require('gulp-useref');
	var uglify = require('gulp-uglify');
	var gulpIf = require('gulp-if');
	var cssnano = require('gulp-cssnano');
	var imagemin = require('gulp-imagemin');
	var cache = require('gulp-cache');
	var del = require('del');
	var runSequence = require('run-sequence');

	// Basic Gulp task syntax
	gulp.task('hello', function() {
	console.log('Hello Zell!');
	})

	// Development Tasks
	// -----------------

	// Start browserSync server
	gulp.task('browserSync', function() {
	browserSync({
	server: {
	baseDir: 'app'
	}
	})
	})

	gulp.task('sass', function() {
	return gulp.src('app/scss/*/.scss') // Gets all files ending with .scss in app/scss and children dirs
	.pipe(sass().on('error', sass.logError)) // Passes it through a gulp-sass, log errors to console
	.pipe(gulp.dest('app/css')) // Outputs it in the css folder
	.pipe(browserSync.reload({ // Reloading with Browser Sync
	stream: true
	}));
	})

	// Watchers
	gulp.task('watch', function() {
	gulp.watch('app/scss/*/.scss', ['sass']);
	gulp.watch('app/*.html', browserSync.reload);
	gulp.watch('app/js/*/.js', browserSync.reload);
	})

	// Optimization Tasks
	// ------------------

	// Optimizing CSS and JavaScript
	gulp.task('useref', function() {

	return gulp.src('app/*.html')
	.pipe(useref())
	.pipe(gulpIf('*.js', uglify()))
	.pipe(gulpIf('*.css', cssnano()))
	.pipe(gulp.dest('dist'));
	});

	// Optimizing Images
	gulp.task('images', function() {
	return gulp.src('app/images/*/.+(png\|jpg\|jpeg\|gif\|svg)')
	// Caching images that ran through imagemin
	.pipe(cache(imagemin({
	interlaced: true,
	})))
	.pipe(gulp.dest('dist/images'))
	});

	// Copying fonts
	gulp.task('fonts', function() {
	return gulp.src('app/fonts/*/')
	.pipe(gulp.dest('dist/fonts'))
	})

	// Cleaning
	gulp.task('clean', function() {
	return del.sync('dist').then(function(cb) {
	return cache.clearAll(cb);
	});
	})

	gulp.task('clean:dist', function() {
	return del.sync(['dist/*/', '!dist/images', '!dist/images/*/']);
	});

	// Build Sequences
	// ---------------

	gulp.task('default', function(callback) {
	runSequence(['sass', 'browserSync'], 'watch',
	callback
	)
	})

	gulp.task('build', function(callback) {
	runSequence(
	'clean:dist',
	'sass',
	['useref', 'images', 'fonts'],
	callback
	)
	})
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!--build:css css/styles.min.css-->
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/styles.css">
	<!--endbuild-->
	</head>

	<body>
	<!-- ACA ES DONDE DESARROLLAS, EL RESTO NO SE TOCA -->

	<!--build:js js/main.min.js -->
	<!-- <script src="js/main.js"></script> -->
	<!-- endbuild -->
	</body>

	</html>
	{
	"name": "site",
	"version": "0.0.1",
	"description": "Site Description ",
	"main": "index.js",
	"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1"
	},
	"author": "Gastón Ambrogi",
	"license": "MIT",
	"devDependencies": {
	"browser-sync": "^2.26.0",
	"del": "^3.0.0",
	"gulp": "^3.9.1",
	"gulp-cache": "^1.0.2",
	"gulp-imagemin": "^4.1.0",
	"gulp-sass": "^4.0.1",
	"gulp-uglify": "^3.0.1",
	"gulp-useref": "^3.1.5",
	"run-sequence": "^2.2.1",
	"gulp-cssnano": "^2.1.3"
	}
	}
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed,
	figure, figcaption, footer, header, hgroup,
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	box-sizing: border-box;
	vertical-align: baseline;
	}
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure,
	footer, header, hgroup, menu, nav, section {
	display: block;
	}
	body {
	line-height: 1;
	}
	ol, ul {
	list-style: none;
	}
	blockquote, q {
	quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
	content: '';
	content: none;
	}
	table {
	border-collapse: collapse;
	border-spacing: 0;
	}