Guest User

Untitled

a guest
Aug 3rd, 2015
248
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.92 KB | None | 0 0
  1. 'use strict';
  2. var gulp = require('gulp');
  3. var gutil = require('gulp-util');
  4. var del = require('del');
  5. var uglify = require('gulp-uglify');
  6. var gulpif = require('gulp-if');
  7. var exec = require('child_process').exec;
  8.  
  9.  
  10. var notify = require('gulp-notify');
  11.  
  12. var buffer = require('vinyl-buffer');
  13. var argv = require('yargs').argv;
  14. // sass
  15. var sass = require('gulp-sass');
  16. var postcss = require('gulp-postcss');
  17. var autoprefixer = require('autoprefixer-core');
  18. var sourcemaps = require('gulp-sourcemaps');
  19. // BrowserSync
  20. var browserSync = require('browser-sync');
  21. // js
  22. var watchify = require('watchify');
  23. var browserify = require('browserify');
  24. var source = require('vinyl-source-stream');
  25. // image optimization
  26. var imagemin = require('gulp-imagemin');
  27. // linting
  28. var jshint = require('gulp-jshint');
  29. var stylish = require('jshint-stylish');
  30. // testing/mocha
  31. var mocha = require('gulp-mocha');
  32.  
  33. // gulp build --production
  34. var production = !!argv.production;
  35. // determine if we're doing a build
  36. // and if so, bypass the livereload
  37. var build = argv._.length ? argv._[0] === 'build' : false;
  38. var watch = argv._.length ? argv._[0] === 'watch' : true;
  39.  
  40. // ----------------------------
  41. // Error notification methods
  42. // ----------------------------
  43. var beep = function() {
  44. var os = require('os');
  45. var file = 'gulp/error.wav';
  46. if (os.platform() === 'linux') {
  47. // linux
  48. exec("aplay " + file);
  49. } else {
  50. // mac
  51. console.log("afplay " + file);
  52. exec("afplay " + file);
  53. }
  54. };
  55. var handleError = function(task) {
  56. return function(err) {
  57. beep();
  58.  
  59. notify.onError({
  60. message: task + ' failed, check the logs..',
  61. sound: false
  62. })(err);
  63.  
  64. gutil.log(gutil.colors.bgRed(task + ' error:'), gutil.colors.red(err));
  65. };
  66. };
  67. // --------------------------
  68. // CUSTOM TASK METHODS
  69. // --------------------------
  70. var tasks = {
  71. // --------------------------
  72. // Delete build folder
  73. // --------------------------
  74. clean: function(cb) {
  75. del(['build/'], cb);
  76. },
  77. // --------------------------
  78. // Copy static assets
  79. // --------------------------
  80. assets: function() {
  81. return gulp.src('./client/assets/**/*')
  82. .pipe(gulp.dest('build/assets/'));
  83. },
  84. // --------------------------
  85. // HTML
  86. // --------------------------
  87. // html templates (when using the connect server)
  88. templates: function() {
  89. gulp.src('templates/*.html')
  90. .pipe(gulp.dest('build/'));
  91. },
  92. // --------------------------
  93. // SASS (libsass)
  94. // --------------------------
  95. sass: function() {
  96. return gulp.src('./client/scss/*.scss')
  97. // sourcemaps + sass + error handling
  98. .pipe(gulpif(!production, sourcemaps.init()))
  99. .pipe(sass({
  100. sourceComments: !production,
  101. outputStyle: production ? 'compressed' : 'nested'
  102. }))
  103. .on('error', handleError('SASS'))
  104. // generate .maps
  105. .pipe(gulpif(!production, sourcemaps.write({
  106. 'includeContent': false,
  107. 'sourceRoot': '.'
  108. })))
  109. // autoprefixer
  110. .pipe(gulpif(!production, sourcemaps.init({
  111. 'loadMaps': true
  112. })))
  113. .pipe(postcss([autoprefixer({browsers: ['last 2 versions']})]))
  114. // we don't serve the source files
  115. // so include scss content inside the sourcemaps
  116. .pipe(sourcemaps.write({
  117. 'includeContent': true
  118. }))
  119. // write sourcemaps to a specific directory
  120. // give it a file and save
  121. .pipe(gulp.dest('build/css'));
  122. },
  123. // --------------------------
  124. // Browserify
  125. // --------------------------
  126. browserify: function() {
  127. var bundler = browserify('./client/js/index.js', {
  128. debug: !production,
  129. cache: {}
  130. });
  131. // determine if we're doing a build
  132. // and if so, bypass the livereload
  133. var build = argv._.length ? argv._[0] === 'build' : false;
  134. if (watch) {
  135. bundler = watchify(bundler);
  136. }
  137. var rebundle = function() {
  138. return bundler.bundle()
  139. .on('error', handleError('Browserify'))
  140. .pipe(source('build.js'))
  141. .pipe(gulpif(production, buffer()))
  142. .pipe(gulpif(production, uglify()))
  143. .pipe(gulp.dest('build/js/'));
  144. };
  145. bundler.on('update', rebundle);
  146. return rebundle();
  147. },
  148. // --------------------------
  149. // linting
  150. // --------------------------
  151. lintjs: function() {
  152. return gulp.src([
  153. 'gulpfile.js',
  154. './client/js/index.js',
  155. './client/js/**/*.js'
  156. ]).pipe(jshint())
  157. .pipe(jshint.reporter(stylish))
  158. .on('error', function() {
  159. beep();
  160. });
  161. },
  162. // --------------------------
  163. // Optimize asset images
  164. // --------------------------
  165. optimize: function() {
  166. return gulp.src('./client/assets/**/*.{gif,jpg,png,svg}')
  167. .pipe(imagemin({
  168. progressive: true,
  169. svgoPlugins: [{removeViewBox: false}],
  170. // png optimization
  171. optimizationLevel: production ? 3 : 1
  172. }))
  173. .pipe(gulp.dest('./client/assets/'));
  174. },
  175. // --------------------------
  176. // Testing with mocha
  177. // --------------------------
  178. test: function() {
  179. return gulp.src('./client/**/*test.js', {read: false})
  180. .pipe(mocha({
  181. 'ui': 'bdd',
  182. 'reporter': 'spec'
  183. })
  184. );
  185. },
  186.  
  187.  
  188. };
  189.  
  190. gulp.task('browser-sync', function() {
  191. browserSync({
  192. server: {
  193. baseDir: "./build"
  194. },
  195. port: process.env.PORT || 3000
  196. });
  197. });
  198.  
  199. gulp.task('reload-sass', ['sass'], function(){
  200. browserSync.reload();
  201. });
  202. gulp.task('reload-js', ['browserify'], function(){
  203. browserSync.reload();
  204. });
  205. gulp.task('reload-templates', ['templates'], function(){
  206. browserSync.reload();
  207. });
  208.  
  209. // --------------------------
  210. // CUSTOMS TASKS
  211. // --------------------------
  212. gulp.task('clean', tasks.clean);
  213. // for production we require the clean method on every individual task
  214. var req = build ? ['clean'] : [];
  215. // individual tasks
  216. gulp.task('templates', req, tasks.templates);
  217. gulp.task('assets', req, tasks.assets);
  218. gulp.task('sass', req, tasks.sass);
  219. gulp.task('browserify', req, tasks.browserify);
  220. gulp.task('lint:js', tasks.lintjs);
  221. gulp.task('optimize', tasks.optimize);
  222. gulp.task('test', tasks.test);
  223.  
  224. // --------------------------
  225. // DEV/WATCH TASK
  226. // --------------------------
  227. gulp.task('watch', ['assets', 'templates', 'sass', 'browserify', 'browser-sync'], function() {
  228.  
  229. // --------------------------
  230. // watch:sass
  231. // --------------------------
  232. gulp.watch('./client/scss/**/*.scss', ['reload-sass']);
  233.  
  234. // --------------------------
  235. // watch:js
  236. // --------------------------
  237. gulp.watch('./client/js/**/*.js', ['lint:js', 'reload-js']);
  238.  
  239. // --------------------------
  240. // watch:html
  241. // --------------------------
  242. gulp.watch('./templates/**/*.html', ['reload-templates']);
  243.  
  244. gutil.log(gutil.colors.bgGreen('Watching for changes...'));
  245. });
  246.  
  247. // build task
  248. gulp.task('build', [
  249. 'clean',
  250. 'templates',
  251. 'assets',
  252. 'sass',
  253. 'browserify'
  254. ]);
  255.  
  256. gulp.task('default', ['watch']);
  257.  
  258. // gulp (watch) : for development and livereload
  259. // gulp build : for a one off development build
  260. // gulp build --production : for a minified production build
Add Comment
Please, Sign In to add comment