Last active
March 7, 2017 17:04
-
-
Save Symfomany/a194a3088601ef66d2b8ffb2e22a3749 to your computer and use it in GitHub Desktop.
Wild Gulp Project to handle dev/prod environments with CSS,JS, SASS IMAGES, JSON & HTML optimizes
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * This example: | |
| * Uses the built-in BrowserSync server for HTML files | |
| * Watches & compiles SASS files | |
| * Watches & injects CSS files | |
| */ | |
| let browserSync = require('browser-sync'); | |
| let gulp = require('gulp'); | |
| let sass = require('gulp-sass'); | |
| let size = require('gulp-size'); | |
| let uncss = require('gulp-uncss'); | |
| let filter = require('gulp-filter'); | |
| let concat = require('gulp-concat'); | |
| let notify = require("gulp-notify"); | |
| let minifyCss = require('gulp-minify-css'); | |
| let autoprefixer = require('gulp-autoprefixer'); | |
| let rename = require('gulp-rename'); | |
| let clean = require('gulp-clean'); | |
| let cache = require('gulp-cache'); | |
| let imagemin = require('gulp-imagemin'); | |
| let sourcemaps = require('gulp-sourcemaps'); | |
| let plumber = require('gulp-plumber'); | |
| let gutil = require("gulp-util"); | |
| let minify = require('gulp-minify'); | |
| let path = require('path'); | |
| //init tyo reload brower | |
| let reload = browserSync.reload; | |
| let validator = require('is-my-json-valid/require'); // to validate some JSON files for XHR calls in example | |
| /** | |
| * Config your env. here | |
| */ | |
| const configuration = { | |
| browserSync: { | |
| port: 8066, | |
| server: { | |
| baseDir: "./", //base | |
| index: "index.html" //fichier a chargé | |
| } | |
| }, | |
| baseDir: './', | |
| srcDir: './src/', | |
| distDir: './dist/', | |
| cssDir: 'css/', | |
| sassDir: 'sass/', | |
| jsDir: 'js/', | |
| imagesDir: 'images/', | |
| dataDir: 'data/' | |
| }; | |
| /** | |
| * Handler Errors | |
| * @param {any} err | |
| */ | |
| function handleError(err) { | |
| console.log("************************************************** ERRORS*******************************************************"); | |
| gutil.log('error', 'An error to compile/transpile', gutil.colors.bold.dim.white.bgRed(err.toString())); | |
| console.log(err.toString()); | |
| console.log("************************************************** ERRORS*******************************************************"); | |
| notifier.notify({ | |
| title: '************Erreur de Compilation************', | |
| message: err.toString(), | |
| icon: path.join(__dirname, 'js.jpg'), | |
| sound: true, | |
| wait: true | |
| }); | |
| this.emit('end'); | |
| } | |
| /** | |
| * Task to configure your Browser Sync | |
| */ | |
| gulp.task('browser-sync', function () { | |
| browserSync(configuration.browserSync); | |
| }); | |
| /** | |
| * Task to reload Browser Sync | |
| */ | |
| gulp.task('browser-reload', function () { | |
| reload({ stream: true }); | |
| }); | |
| /** | |
| * Clean all env of your dist/ rep | |
| */ | |
| gulp.task('clean', function () { | |
| return gulp.src([ | |
| configuration.distDir + configuration.cssDir, | |
| configuration.distDir + configuration.jsDir, | |
| configuration.distDir + configuration.imagesDir | |
| ], { read: false }) | |
| .pipe(clean()); | |
| }); | |
| /** | |
| * Compress all images with 4 optimization | |
| */ | |
| gulp.task('images', ['clean-images'], function () { | |
| return gulp | |
| .src('./images') | |
| .pipe(imagemin({ optimizationLevel: 4 })) | |
| .pipe(gulp.dest(configuration.distDir + configuration.imagesDir)); | |
| }); | |
| /** | |
| * Compile all SASS assets since point of entry SCSS | |
| */ | |
| gulp.task('sass', function () { | |
| return gulp.src(configuration.srcDir + configuration.sassDir +'main.scss') | |
| .pipe(plumber({ | |
| errorHandler: notify.onError("Error: <%= error.message %>") | |
| })) | |
| .pipe(sourcemaps.init()) | |
| .pipe(sass({ style: 'expanded', })) | |
| .pipe(rename({ suffix: '.sass.min' })) | |
| .pipe(minifyCss()) | |
| .pipe(sourcemaps.write('.')) | |
| .pipe(gulp.dest(configuration.distDir + configuration.cssDir)) | |
| .pipe(notify("Style Modifié")); | |
| }); | |
| /** | |
| * Clean CSS, Concat, minimify and move dist/ | |
| */ | |
| gulp.task('css', function () { | |
| return gulp.src(configuration.srcDir + configuration.cssDir + '*.css') | |
| .pipe(plumber({ | |
| errorHandler: notify.onError("Error: <%= error.message %>") | |
| })) | |
| .pipe(concat('app.css')) | |
| .pipe(rename({ suffix: '.min' })) | |
| .pipe(minifyCss()) | |
| .pipe(uncss({ | |
| html: ['*.html'] | |
| })) | |
| .pipe(gulp.dest(configuration.distDir + configuration.cssDir)) | |
| .pipe(notify("Style Modifié")); | |
| }); | |
| /** | |
| * Validate JSON file | |
| */ | |
| gulp.task('js', function () { | |
| // validate JSON | |
| let validate = validator(configuration.srcDir + configuration.dataDir +'walkindead.json') | |
| if (!validate.errors) { | |
| notify("Aucune erreur JSON") | |
| } else { | |
| notify(JSON.stringify(validate.errors)) | |
| } | |
| /** | |
| * Source Map in JS , concat & minimify | |
| */ | |
| return gulp.src([ //ordre a respecter | |
| configuration.srcDir + "app.js", | |
| ]).on('error', handleError) | |
| .pipe(plumber({ | |
| errorHandler: notify.onError("Error: <%= error.message %>") | |
| })) // débogage de mes pipes | |
| .pipe(sourcemaps.init()) | |
| .pipe(concat('app.min.js')) | |
| .pipe(sourcemaps.write('.')) | |
| .pipe(minify({ | |
| ext:{ | |
| src:'-debug.js', | |
| min:'.js' | |
| }, | |
| exclude: ['tasks'], | |
| ignoreFiles: ['.combo.js', '-min.js'] | |
| })) | |
| .pipe(gulp.dest(configuration.distDir + configuration.jsDir)) // repertoire distant | |
| .pipe(notify("Js Modifié")); // notification | |
| }); | |
| /** | |
| * All Tasks observed by watches | |
| */ | |
| gulp.task('default', ['clean','browser-sync', 'sass', 'css', 'js'], function () { | |
| gulp.watch(configuration.srcDir + configuration.sassDir + "**/*.scss", ['sass']); | |
| // watch permet de regarder les changements de fichier et lancer les tâches que l'on souhaite | |
| gulp.watch(configuration.srcDir + configuration.cssDir + "**/*.css", ['css']); | |
| gulp.watch(configuration.srcDir + configuration.imagesDir, ['images']); | |
| gulp.watch([configuration.srcDir + configuration.jsDir + "/**/**/*.js", configuration.srcDir + configuration.jsDir + "**/*.js", configuration.srcDir + configuration.jsDir + "*.js"], ['js']); | |
| gulp.watch(["*.html"]).on('change', browserSync.reload); //reload on HTML | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "wild-gulp-exo", | |
| "description": "Wild Gulp Project 1.0", | |
| "version": "1.0.0", | |
| "main": "gulpfile.js", | |
| "author": "Julien Boyer", | |
| "license": "MIT", | |
| "dependencies": { | |
| "browser-sync": "^2.18.8", | |
| "gulp": "^3.9.1", | |
| "gulp-autoprefixer": "^3.1.0", | |
| "gulp-cache": "^0.4.5", | |
| "gulp-clean": "^0.3.2", | |
| "gulp-concat": "^2.6.0", | |
| "gulp-filter": "^4.0.0", | |
| "gulp-imagemin": "^3.0.2", | |
| "gulp-minify-css": "^1.2.4", | |
| "gulp-notify": "^2.2.0", | |
| "gulp-plumber": "^1.1.0", | |
| "gulp-rename": "^1.2.2", | |
| "gulp-sass": "^2.3.2", | |
| "gulp-size": "^2.1.0", | |
| "gulp-sourcemaps": "^1.6.0", | |
| "gulp-uglify": "^2.0.0", | |
| "gulp-uncss": "^1.0.6", | |
| "gutil": "^1.6.4", | |
| "is-my-json-valid": "^2.15.0", | |
| "json-server": "^0.9.1" | |
| }, | |
| "scripts": { | |
| "start": "gulp" | |
| }, | |
| "devDependencies": { | |
| "babelify": "^7.3.0" | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Use Gulp Task Runner to create/handle tasks around your Wild Web Project | |
| Example with: | |
| ### Requirements Gulp & Browser Sync in Global | |
| ``` | |
| npm install -g gulp | |
| npm install -g browser-sync | |
| ``` |
Author
Symfomany
commented
Mar 7, 2017
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment