Advertisement
Guest User

Gulpfile-v2

a guest
Apr 24th, 2017
88
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // ## Globals
  2. var argv         = require('minimist')(process.argv.slice(2));
  3. var autoprefixer = require('gulp-autoprefixer');
  4. var browserSync  = require('browser-sync').create();
  5. var changed      = require('gulp-changed');
  6. var concat       = require('gulp-concat');
  7. var flatten      = require('gulp-flatten');
  8. var gulp         = require('gulp');
  9. var gulpif       = require('gulp-if');
  10. var imagemin     = require('gulp-imagemin');
  11. var inject       = require('gulp-inject');
  12. var jshint       = require('gulp-jshint');
  13. var lazypipe     = require('lazypipe');
  14. var less         = require('gulp-less');
  15. var merge        = require('merge-stream');
  16. var minifyCss    = require('gulp-minify-css');
  17. var plumber      = require('gulp-plumber');
  18. var rev          = require('gulp-rev');
  19. var runSequence  = require('run-sequence');
  20. var sourcemaps   = require('gulp-sourcemaps');
  21. var uglify       = require('gulp-uglify');
  22.  
  23. // See https://github.com/austinpray/asset-builder
  24. var manifest = require('asset-builder')('./assets/manifest.json');
  25.  
  26. // `path` - Paths to base asset directories. With trailing slashes.
  27. // - `path.source` - Path to the source files. Default: `assets/`
  28. // - `path.dist` - Path to the build directory. Default: `dist/`
  29. var path = manifest.paths;
  30.  
  31. // `config` - Store arbitrary configuration values here.
  32. var config = manifest.config || {};
  33.  
  34. // `globs` - These ultimately end up in their respective `gulp.src`.
  35. // - `globs.js` - Array of asset-builder JS dependency objects. Example:
  36. //   ```
  37. //   {type: 'js', name: 'main.js', globs: []}
  38. //   ```
  39. // - `globs.css` - Array of asset-builder CSS dependency objects. Example:
  40. //   ```
  41. //   {type: 'css', name: 'main.css', globs: []}
  42. //   ```
  43. // - `globs.fonts` - Array of font path globs.
  44. // - `globs.images` - Array of image path globs.
  45. // - `globs.bower` - Array of all the main Bower files.
  46. var globs = manifest.globs;
  47.  
  48. // `project` - paths to first-party assets.
  49. // - `project.js` - Array of first-party JS assets.
  50. // - `project.css` - Array of first-party CSS assets.
  51. var project = manifest.getProjectGlobs();
  52.  
  53. // CLI options
  54. var enabled = {
  55.     // Enable static asset revisioning when `--production`
  56.     rev: argv.production,
  57.     // Disable source maps when `--production`
  58.     maps: !argv.production,
  59.     // Fail styles task on error when `--production`
  60.     failStyleTask: argv.production,
  61.     // Fail due to JSHint warnings only when `--production`
  62.     failJSHint: argv.production,
  63.     // Strip debug statments from javascript when `--production`
  64.     stripJSDebug: argv.production
  65. };
  66.  
  67. // Path to the compiled assets manifest in the dist directory
  68. var revManifest = path.dist + 'assets.json';
  69.  
  70. // ## Reusable Pipelines
  71. // See https://github.com/OverZealous/lazypipe
  72.  
  73. // ### CSS processing pipeline
  74. // Example
  75. // ```
  76. // gulp.src(cssFiles)
  77. //   .pipe(cssTasks('main.css')
  78. //   .pipe(gulp.dest(path.dist + 'styles'))
  79. // ```
  80. var cssTasks = function(filename) {
  81.     return lazypipe()
  82.         .pipe(function() {
  83.             return gulpif(!enabled.failStyleTask, plumber());
  84.         })
  85.         .pipe(function() {
  86.             return gulpif(enabled.maps, sourcemaps.init());
  87.         })
  88.         .pipe(function() {
  89.             return gulpif('*.less', less());
  90.         })
  91.         .pipe(concat, filename)
  92.         .pipe(autoprefixer, {
  93.             browsers: [
  94.                 'last 2 versions',
  95.                 'android 4',
  96.                 'opera 12'
  97.             ]
  98.         })
  99.         .pipe(minifyCss, {
  100.             advanced: false,
  101.             rebase: false
  102.         })
  103.         .pipe(function() {
  104.             return gulpif(enabled.rev, rev());
  105.         })
  106.         .pipe(function() {
  107.             return gulpif(enabled.maps, sourcemaps.write('.', {
  108.                 sourceRoot: 'assets/styles/'
  109.             }));
  110.         })();
  111. };
  112.  
  113. // ### JS processing pipeline
  114. // Example
  115. // ```
  116. // gulp.src(jsFiles)
  117. //   .pipe(jsTasks('main.js')
  118. //   .pipe(gulp.dest(path.dist + 'scripts'))
  119. // ```
  120. var jsTasks = function(filename) {
  121.     return lazypipe()
  122.         .pipe(function() {
  123.             return gulpif(enabled.maps, sourcemaps.init());
  124.         })
  125.         .pipe(concat, filename)
  126.         .pipe(uglify, {
  127.             compress: {
  128.                 'drop_debugger': enabled.stripJSDebug
  129.             }
  130.         })
  131.         .pipe(function() {
  132.             return gulpif(enabled.rev, rev());
  133.         })
  134.         .pipe(function() {
  135.             return gulpif(enabled.maps, sourcemaps.write('.', {
  136.                 sourceRoot: 'assets/scripts/'
  137.             }));
  138.         })();
  139. };
  140.  
  141. // ### Write to rev manifest
  142. // If there are any revved files then write them to the rev manifest.
  143. // See https://github.com/sindresorhus/gulp-rev
  144. var writeToManifest = function(directory) {
  145.     return lazypipe()
  146.         .pipe(gulp.dest, path.dist + directory)
  147.         .pipe(browserSync.stream, {match: '**/*.{js,css}'})
  148.         .pipe(rev.manifest, revManifest, {
  149.             base: path.dist,
  150.             merge: true
  151.         })
  152.         .pipe(gulp.dest, path.dist)();
  153. };
  154.  
  155. // ## Gulp tasks
  156. // Run `gulp -T` for a task summary
  157.  
  158. // ### Styles
  159. // `gulp styles` - Compiles, combines, and optimizes Bower CSS and project CSS.
  160. // By default this task will only log a warning if a precompiler error is
  161. // raised. If the `--production` flag is set: this task will fail outright.
  162. gulp.task('styles', function() {
  163.     var merged = merge();
  164.     manifest.forEachDependency('css', function(dep) {
  165.         var cssTasksInstance = cssTasks(dep.name);
  166.         if (!enabled.failStyleTask) {
  167.             cssTasksInstance.on('error', function(err) {
  168.                 console.error(err.message);
  169.                 this.emit('end');
  170.             });
  171.         }
  172.         merged.add(gulp.src(dep.globs, {base: 'styles'})
  173.             .pipe(cssTasksInstance));
  174.     });
  175.     return merged
  176.         .pipe(writeToManifest('styles'));
  177. });
  178.  
  179. // ### Less
  180. // Injects Bootstrap as reference for all .less files in assets folder
  181. gulp.task('less', function() {
  182.     return gulp.src('');
  183. });
  184.  
  185. // ### Scripts
  186. // `gulp scripts` - Runs JSHint then compiles, combines, and optimizes Bower JS
  187. // and project JS.
  188. gulp.task('scripts', ['jshint'], function() {
  189.     var merged = merge();
  190.     manifest.forEachDependency('js', function(dep) {
  191.         merged.add(
  192.             gulp.src(dep.globs, {base: 'scripts'})
  193.                 .pipe(jsTasks(dep.name))
  194.         );
  195.     });
  196.     return merged
  197.         .pipe(writeToManifest('scripts'));
  198. });
  199.  
  200. // ### Fonts
  201. // `gulp fonts` - Grabs all the fonts and outputs them in a flattened directory
  202. // structure. See: https://github.com/armed/gulp-flatten
  203. gulp.task('fonts', function() {
  204.     return gulp.src(globs.fonts)
  205.         .pipe(flatten())
  206.         .pipe(gulp.dest(path.dist + 'fonts'))
  207.         .pipe(browserSync.stream());
  208. });
  209.  
  210. // ### Images
  211. // `gulp images` - Run lossless compression on all the images.
  212. gulp.task('images', function() {
  213.   return gulp.src(globs.images)
  214.     .pipe(imagemin([
  215.       imagemin.jpegtran({progressive: true}),
  216.       imagemin.gifsicle({interlaced: true}),
  217.       imagemin.svgo({plugins: [{removeUnknownsAndDefaults: false}, {cleanupIDs: false}]})
  218.     ]))
  219.     .pipe(gulp.dest(path.dist + 'images'))
  220.     .pipe(browserSync.stream());
  221. });
  222.  
  223. // ### JSHint
  224. // `gulp jshint` - Lints configuration JSON and project JS.
  225. gulp.task('jshint', function() {
  226.     return gulp.src([
  227.         'bower.json', 'gulpfile.js'
  228.     ].concat(project.js))
  229.         .pipe(jshint())
  230.         .pipe(jshint.reporter('jshint-stylish'))
  231.         .pipe(gulpif(enabled.failJSHint, jshint.reporter('fail')));
  232. });
  233.  
  234. // ### Clean
  235. // `gulp clean` - Deletes the build folder entirely.
  236. gulp.task('clean', require('del').bind(null, [path.dist]));
  237.  
  238. // ### Watch
  239. // `gulp watch` - Use BrowserSync to proxy your dev server and synchronize code
  240. // changes across devices. Specify the hostname of your dev server at
  241. // `manifest.config.devUrl`. When a modification is made to an asset, run the
  242. // build step for that asset and inject the changes into the page.
  243. // See: http://www.browsersync.io
  244. gulp.task('watch', function() {
  245.     browserSync.init({
  246.         files: ['{lib,templates}/**/*.php', '*.php'],
  247.         proxy: config.devUrl,
  248.         snippetOptions: {
  249.             whitelist: ['/wp-admin/admin-ajax.php'],
  250.             blacklist: ['/wp-admin/**']
  251.         }
  252.     });
  253.     gulp.watch([path.source + 'styles/**/*'], ['styles']);
  254.     gulp.watch([path.source + 'scripts/**/*'], ['jshint', 'scripts']);
  255.     gulp.watch([path.source + 'fonts/**/*'], ['fonts']);
  256.     gulp.watch([path.source + 'images/**/*'], ['images']);
  257.     gulp.watch(['bower.json', 'assets/manifest.json'], ['build']);
  258. });
  259.  
  260. // ### Build
  261. // `gulp build` - Run all the build tasks but don't clean up beforehand.
  262. // Generally you should be running `gulp` instead of `gulp build`.
  263. gulp.task('build', function(callback) {
  264.     runSequence('styles',
  265.         'scripts',
  266.         ['fonts', 'images'],
  267.         callback);
  268. });
  269.  
  270. // ### Wiredep
  271. // `gulp wiredep` - Automatically inject Less and Sass Bower dependencies. See
  272. // https://github.com/taptapship/wiredep
  273. gulp.task('wiredep', function() {
  274.     var wiredep = require('wiredep').stream;
  275.     return gulp.src(project.css)
  276.         .pipe(wiredep())
  277.         .pipe(changed(path.source + 'styles', {
  278.             hasChanged: changed.compareSha1Digest
  279.         }))
  280.         .pipe(gulp.dest(path.source + 'styles'));
  281. });
  282.  
  283. // ### Gulp
  284. // `gulp` - Run a complete build. To compile for production run `gulp --production`.
  285. gulp.task('default', ['clean'], function() {
  286.     gulp.start('build');
  287. });
  288.  
  289. // ### Dev
  290. // `dev` - Run in dev enviroment
  291. gulp.task('dev', ['clean'], function() {
  292.     runSequence(
  293.         'build',
  294.         'watch'
  295.     );
  296. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement