Advertisement
Guest User

gulpfile

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