Skip to content

Instantly share code, notes, and snippets.

@JCervantesB
Created February 3, 2023 23:14
Show Gist options
  • Save JCervantesB/b11d536e72d61c70199a1320791dfb9a to your computer and use it in GitHub Desktop.
Save JCervantesB/b11d536e72d61c70199a1320791dfb9a to your computer and use it in GitHub Desktop.
DevWebCamp
const { src, dest, watch, parallel } = require('gulp');
// CSS
const sass = require('gulp-sass')(require('sass'));
const plumber = require('gulp-plumber');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const postcss = require('gulp-postcss');
const sourcemaps = require('gulp-sourcemaps');
// Imagenes
const cache = require('gulp-cache');
const imagemin = require('gulp-imagemin');
const webp = require('gulp-webp');
const avif = require('gulp-avif');
// Javascript
const terser = require('gulp-terser-js');
const concat = require('gulp-concat');
const rename = require('gulp-rename')
// Webpack
const webpack = require('webpack-stream')
const paths = {
scss: 'src/scss/**/*.scss',
js: 'src/js/**/*.js',
imagenes: 'src/img/**/*'
}
function css() {
return src(paths.scss)
.pipe( sourcemaps.init())
.pipe( sass({outputStyle: 'expanded'}))
.pipe( postcss([autoprefixer()]))
// .pipe( postcss([autoprefixer(), cssnano()]))
.pipe( sourcemaps.write('.'))
.pipe( dest('public/build/css') );
}
function javascript() {
return src(paths.js)
.pipe( webpack({
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader']
}
]
},
mode: 'production',
watch: true,
entry: './src/js/app.js'
}))
.pipe(sourcemaps.init())
// .pipe(concat('bundle.js'))
.pipe(terser())
.pipe(sourcemaps.write('.'))
.pipe(rename({ suffix: '.min' }))
.pipe(dest('./public/build/js'))
}
function imagenes() {
return src(paths.imagenes)
.pipe( cache(imagemin({ optimizationLevel: 3})))
.pipe( dest('public/build/img'))
}
function versionWebp( done ) {
const opciones = {
quality: 50
};
src('src/img/**/*.{png,jpg}')
.pipe( webp(opciones) )
.pipe( dest('public/build/img') )
done();
}
function versionAvif( done ) {
const opciones = {
quality: 50
};
src('src/img/**/*.{png,jpg}')
.pipe( avif(opciones) )
.pipe( dest('public/build/img') )
done();
}
function dev(done) {
watch( paths.scss, css );
watch( paths.js, javascript );
watch( paths.imagenes, imagenes)
watch( paths.imagenes, versionWebp)
watch( paths.imagenes, versionAvif)
done()
}
exports.css = css;
exports.js = javascript;
exports.imagenes = imagenes;
exports.versionWebp = versionWebp;
exports.versionAvif = versionAvif;
exports.dev = parallel( css, imagenes, versionWebp, versionAvif, javascript, dev) ;
{
"name": "devwebcamp-php-mvc-mysql",
"version": "1.0.0",
"description": "Proyecto Final Desarrollo Web Completo con @codigoconjuan",
"main": "index.js",
"scripts": {
"dev": "gulp dev"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^6.7.1",
"cssnano": "^5.1.10",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^8.0.0",
"gulp-avif": "^1.1.1",
"gulp-cache": "^1.1.3",
"gulp-clean": "^0.4.0",
"gulp-concat": "^2.6.1",
"gulp-imagemin": "^7.1.0",
"gulp-notify": "^4.0.0",
"gulp-plumber": "^1.2.1",
"gulp-postcss": "^9.0.0",
"gulp-rename": "^2.0.0",
"gulp-sass": "^5.0.0",
"gulp-sourcemaps": "^3.0.0",
"gulp-terser-js": "^5.2.2",
"gulp-webp": "^4.0.1",
"sass": "^1.41.1",
"style-loader": "^3.3.1",
"terser": "^5.14.2"
},
"dependencies": {
"sweetalert2": "^11.4.31",
"swiper": "^8.3.2",
"webpack-stream": "^7.0.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment