daily pastebin goal
61%
SHARE
TWEET

gulpfile.js

a guest Jan 16th, 2019 73 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // Niv's gulpfile.js
  2. var gulp = require('gulp'),
  3.  
  4.     // CSS related plugins.
  5.     sass = require('gulp-sass'),
  6.     //sass = require('gulp-ruby-sass'),
  7.     //watchSass = require("gulp-watch-sass"),
  8.     autoprefixer = require('gulp-autoprefixer'),
  9.     sourcemaps = require('gulp-sourcemaps'),
  10.     chalk = require('chalk'), // Colors console text
  11.     csso = require('gulp-csso'), // Minify CSS files
  12.  
  13.     useref = require('gulp-useref'),
  14.  
  15.     // JS related plugins.
  16.     uglify = require('gulp-uglify'), // minify js
  17.  
  18.     // Images plugins.
  19.     imagemin = require('gulp-imagemin'),
  20.     imageminMozjpeg = require('imagemin-mozjpeg'),
  21.  
  22.     // Utility related plugins.
  23.     browserSync = require('browser-sync').create(),
  24.     rename = require("gulp-rename"),
  25.     cache = require('gulp-cache'),
  26.     del = require('del'),
  27.     inject = require('gulp-inject'),
  28.     uglify = require('gulp-uglify'),
  29.     runSequence = require('run-sequence');
  30.  
  31.  
  32.  
  33. var _html = {
  34.   path: {
  35.     src: 'src', // Source folder
  36.     out: 'dist' // Outputs folder
  37.   }
  38. };
  39.  
  40.  
  41.  
  42.  
  43. var config = {
  44.   paths: {
  45.     html: {
  46.       src: _html.path.src + "/**/*.html",
  47.       dest: _html.path.src + "/"
  48.     },
  49.     javascript: {
  50.       htmlProj: {
  51.         src: _html.path.src + "/assets/js/*.js",
  52.         dest: _html.path.src + "/assets/js"
  53.       }
  54.     },
  55.     sass: {
  56.       htmlProj: {
  57.         src: _html.path.src + "/**/*.scss",
  58.         dest: _html.path.src + "/assets/css"
  59.       }
  60.     },
  61.     css: {
  62.       htmlProj: {
  63.         src: _html.path.src + "/assets/css/**/*.css",
  64.         dest: _html.path.src + "/assets/css"
  65.       }
  66.     },
  67.     images: {
  68.       src: _html.path.src + "/assets/images"
  69.     },
  70.     fonts: {
  71.       src: _html.path.src + "/assets/fonts/**/*"
  72.     }
  73.   }
  74. };
  75.  
  76.  
  77.  
  78. var _colorText = {
  79.   error: chalk.bold.red,
  80.   warning: chalk.keyword('orange')
  81. };
  82.  
  83.  
  84.  
  85.  
  86.  
  87. gulp.task('html-sass', function () {
  88.   return gulp.src( config.paths.sass.htmlProj.src )
  89.       .pipe( sourcemaps.init() )
  90.       .pipe( cache( sass({
  91.         noCache: true,
  92.         outputStyle: 'compressed'
  93.       })).on('error', function (err) {
  94.         console.error(_colorText.error('Error!', err.message));
  95.         browserSync.notify('ERROR! Check the terminal', 15000); // Display error in the browser
  96.         this.emit('end'); // Prevent gulp from catching the error and exiting the watch process
  97.       }))
  98.       .pipe(autoprefixer({
  99.         remove: false, // Don't removes outdated prefixes
  100.         browsers: [
  101.           'last 2 versions',
  102.           'safari >= 8',
  103.           'ie >= 11',
  104.           'ff >= 20',
  105.           'ios 6',
  106.           'android 4'
  107.         ],
  108.         add: true // Add any new prefixes
  109.       }))
  110.       //.pipe(sourcemaps.write('./') )
  111.       .pipe(rename({
  112.         suffix: '.min'
  113.       }))
  114.       .pipe(sourcemaps.write())
  115.       .pipe(gulp.dest(config.paths.sass.htmlProj.dest) )
  116.       .pipe(browserSync.reload({
  117.         stream: true
  118.       }));
  119. });
  120.  
  121.  
  122. gulp.task('html-scripts', function () {
  123.   return gulp.src(config.paths.javascript.htmlProj.src)
  124.       .pipe(uglify())
  125.       .pipe(rename({
  126.         suffix: '.min'
  127.       }))
  128.       .pipe(gulp.dest(config.paths.javascript.htmlProj.dest + '/min'))
  129.       .pipe(browserSync.reload({
  130.         stream: true
  131.       }));
  132. });
  133.  
  134. // Add js and css to files
  135. gulp.task('useref', function () {
  136.   return gulp.src(_html.path.src)
  137.       .pipe(useref())
  138.       .pipe(gulp.dest(_html.path.out))
  139. });
  140.  
  141.  
  142. gulp.task('index', function () {
  143.   var target = gulp.src(config.paths.html.src);
  144.   // It's not necessary to read the files (will speed up things), we're only after their paths:
  145.   var sources = gulp.src([config.paths.sass.htmlProj.dest + '/*.css', config.paths.javascript.htmlProj.src], {read: false});
  146.  
  147.   return target.pipe(inject(sources))
  148.       .pipe(gulp.dest(config.paths.html.dest));
  149. });
  150.  
  151. gulp.task('clean:js.min', function() {
  152.   return del([
  153.       config.paths.javascript.htmlProj.dest + '/min'
  154.   ]);
  155. });
  156.  
  157. gulp.task('clean:css.min', function() {
  158.   return del([
  159.       config.paths.sass.htmlProj.dest + '/style.min.css'
  160.   ]);
  161. });
  162.  
  163. gulp.task('cache:clear', function (callback) {
  164.   return cache.clearAll(callback)
  165. });
  166.  
  167. gulp.task('html-image_compressed', function () {
  168.   return gulp.src(config.paths.images.src + '/**/*.+(png|jpg|gif|svg)', {base: './'})
  169.   // Caching images that ran through imagemin
  170.       .pipe(cache(imagemin([
  171.         imageminMozjpeg({
  172.           quality: 90
  173.         })
  174.       ])))
  175.       .pipe(gulp.dest('./'))
  176. });
  177.  
  178.  
  179.  
  180.  
  181.  
  182.  
  183.  
  184. gulp.task('html-watch', ['html-sass', 'html-scripts'], function () {
  185.   // Static server
  186.   browserSync.init({
  187.     server: {
  188.       baseDir: _html.path.src
  189.     }
  190.   });
  191.   // Reloads the browser whenever SCSS, HTML or JS files change
  192.   //gulp.watch(config.paths.html.src, browserSync.reload);
  193.   gulp.watch(config.paths.sass.htmlProj.src, ['html-sass']);
  194.   gulp.watch(config.paths.javascript.htmlProj.src, ['html-scripts'] );
  195. });
  196.  
  197.  
  198.  
  199. gulp.task('html', function (callback) {
  200.   runSequence('clean:js.min', 'clean:css.min', ['html-sass', 'html-scripts', 'html-watch'],
  201.       callback
  202.   )
  203. });
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top