Skip to content

Instantly share code, notes, and snippets.

@gastonambrogi
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.
Estructura basica de directorios para maquetar usando Sass + Gulp

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.

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