You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

224 lines
6.3 KiB

  1. /*******************************
  2. Watch Task
  3. *******************************/
  4. var
  5. gulp = require('gulp'),
  6. // node dependencies
  7. console = require('better-console'),
  8. fs = require('fs'),
  9. // gulp dependencies
  10. autoprefixer = require('gulp-autoprefixer'),
  11. chmod = require('gulp-chmod'),
  12. clone = require('gulp-clone'),
  13. gulpif = require('gulp-if'),
  14. less = require('gulp-less'),
  15. minifyCSS = require('gulp-minify-css'),
  16. plumber = require('gulp-plumber'),
  17. print = require('gulp-print'),
  18. rename = require('gulp-rename'),
  19. replace = require('gulp-replace'),
  20. uglify = require('gulp-uglify'),
  21. util = require('gulp-util'),
  22. watch = require('gulp-watch'),
  23. // user config
  24. config = require('./config/user'),
  25. // task config
  26. tasks = require('./config/project/tasks'),
  27. install = require('./config/project/install'),
  28. // shorthand
  29. globs = config.globs,
  30. assets = config.paths.assets,
  31. output = config.paths.output,
  32. source = config.paths.source,
  33. banner = tasks.banner,
  34. comments = tasks.regExp.comments,
  35. log = tasks.log,
  36. settings = tasks.settings
  37. ;
  38. // add tasks that shouldn't be exposed to end-user
  39. require('./collections/internal')(gulp);
  40. // export task
  41. module.exports = function(callback) {
  42. if( !install.isSetup() ) {
  43. console.error('Cannot watch files. Run "gulp install" to set-up Semantic');
  44. return;
  45. }
  46. // check for right-to-left language
  47. if(config.rtl === true || config.rtl === 'Yes') {
  48. gulp.start('watch-rtl');
  49. return;
  50. }
  51. //console.clear();
  52. console.log('Watching source files for changes');
  53. /*--------------
  54. Watch CSS
  55. ---------------*/
  56. gulp
  57. .watch([
  58. source.config,
  59. source.definitions + '/**/*.less',
  60. source.site + '/**/*.{overrides,variables}',
  61. source.themes + '/**/*.{overrides,variables}'
  62. ], function(file) {
  63. var
  64. lessPath,
  65. stream,
  66. compressedStream,
  67. uncompressedStream,
  68. isDefinition,
  69. isPackagedTheme,
  70. isSiteTheme,
  71. isConfig
  72. ;
  73. // log modified file
  74. gulp.src(file.path)
  75. .pipe(print(log.modified))
  76. ;
  77. /*--------------
  78. Find Source
  79. ---------------*/
  80. // recompile on *.override , *.variable change
  81. isConfig = (file.path.indexOf('theme.config') !== -1 || file.path.indexOf('site.variables') !== -1);
  82. isPackagedTheme = (file.path.indexOf(source.themes) !== -1);
  83. isSiteTheme = (file.path.indexOf(source.site) !== -1);
  84. isDefinition = (file.path.indexOf(source.definitions) !== -1);
  85. if(isConfig) {
  86. console.info('Rebuilding all UI');
  87. // impossible to tell which file was updated in theme.config, rebuild all
  88. gulp.start('build');
  89. return;
  90. }
  91. else if(isPackagedTheme) {
  92. console.log('Change detected in packaged theme');
  93. lessPath = util.replaceExtension(file.path, '.less');
  94. lessPath = lessPath.replace(tasks.regExp.theme, source.definitions);
  95. }
  96. else if(isSiteTheme) {
  97. console.log('Change detected in site theme');
  98. lessPath = util.replaceExtension(file.path, '.less');
  99. lessPath = lessPath.replace(source.site, source.definitions);
  100. }
  101. else {
  102. console.log('Change detected in definition');
  103. lessPath = file.path;
  104. }
  105. /*--------------
  106. Create CSS
  107. ---------------*/
  108. if( fs.existsSync(lessPath) ) {
  109. // unified css stream
  110. stream = gulp.src(lessPath)
  111. .pipe(plumber(settings.plumber.less))
  112. .pipe(less(settings.less))
  113. .pipe(print(log.created))
  114. .pipe(replace(comments.variables.in, comments.variables.out))
  115. .pipe(replace(comments.license.in, comments.license.out))
  116. .pipe(replace(comments.large.in, comments.large.out))
  117. .pipe(replace(comments.small.in, comments.small.out))
  118. .pipe(replace(comments.tiny.in, comments.tiny.out))
  119. .pipe(autoprefixer(settings.prefix))
  120. .pipe(gulpif(config.hasPermission, chmod(config.permission)))
  121. ;
  122. // use 2 concurrent streams from same pipe
  123. uncompressedStream = stream.pipe(clone());
  124. compressedStream = stream.pipe(clone());
  125. uncompressedStream
  126. .pipe(plumber())
  127. .pipe(replace(assets.source, assets.uncompressed))
  128. .pipe(gulp.dest(output.uncompressed))
  129. .pipe(print(log.created))
  130. .on('end', function() {
  131. gulp.start('package uncompressed css');
  132. })
  133. ;
  134. compressedStream = stream
  135. .pipe(plumber())
  136. .pipe(replace(assets.source, assets.compressed))
  137. .pipe(minifyCSS(settings.minify))
  138. .pipe(rename(settings.rename.minCSS))
  139. .pipe(gulp.dest(output.compressed))
  140. .pipe(print(log.created))
  141. .on('end', function() {
  142. gulp.start('package compressed css');
  143. })
  144. ;
  145. }
  146. else {
  147. console.log('Cannot find UI definition at path', lessPath);
  148. }
  149. })
  150. ;
  151. /*--------------
  152. Watch JS
  153. ---------------*/
  154. gulp
  155. .watch([
  156. source.definitions + '/**/*.js'
  157. ], function(file) {
  158. gulp.src(file.path)
  159. .pipe(plumber())
  160. .pipe(replace(comments.license.in, comments.license.out))
  161. .pipe(gulpif(config.hasPermission, chmod(config.permission)))
  162. .pipe(gulp.dest(output.uncompressed))
  163. .pipe(print(log.created))
  164. .pipe(uglify(settings.uglify))
  165. .pipe(rename(settings.rename.minJS))
  166. .pipe(gulp.dest(output.compressed))
  167. .pipe(print(log.created))
  168. .on('end', function() {
  169. gulp.start('package compressed js');
  170. gulp.start('package uncompressed js');
  171. })
  172. ;
  173. })
  174. ;
  175. /*--------------
  176. Watch Assets
  177. ---------------*/
  178. // only copy assets that match component names (or their plural)
  179. gulp
  180. .watch([
  181. source.themes + '/**/assets/**/' + globs.components + '?(s).*'
  182. ], function(file) {
  183. // copy assets
  184. gulp.src(file.path, { base: source.themes })
  185. .pipe(gulpif(config.hasPermission, chmod(config.permission)))
  186. .pipe(gulp.dest(output.themes))
  187. .pipe(print(log.created))
  188. ;
  189. })
  190. ;
  191. };