Skip to content

Instantly share code, notes, and snippets.

@gastonambrogi

gastonambrogi/.gitignore

Last active June 29, 2019 22:40
Show Gist options
  • Save gastonambrogi/4d5c7374447d0b1e0b2331ae35e920d5 to your computer and use it in GitHub Desktop.
Save gastonambrogi/4d5c7374447d0b1e0b2331ae35e920d5 to your computer and use it in GitHub Desktop.
Download ZIP
Estructura basica de directorios para maquetar usando Sass + Gulp
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.

Raw
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
)
})
Raw
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>
Raw
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"
}
}
Raw
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;
}
Raw
styles.scss
@import 'DE_CADA_COMPONENTE.scss';
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment