build-scripts/gulpfile-css.js

   1 'use strict';
   2
   3 var gulp = require('gulp');
   4 var postCssTransform = require('./postcss-transform');
   5 var styleBuilder = require('./style-builder');
   6 var getSourceMapOptions = require('./get-sourcemap-options');
   7 var cssDestDir = 'output/assets/styles';
   8 var cssWatchGlob = 'public/**/*.less';
   9
  10 gulp.task('css:compile', ['css:compile:mobile', 'css:compile:desktop']);
  11
  12 var cssMobileStyleBuilder = styleBuilder(
  13   [
  14     // ...
  15     // 'public/less/mobile-app.less'
  16   ],
  17   {
  18     dest: cssDestDir,
  19     watchGlob: cssWatchGlob,
  20     sourceMapOptions: getSourceMapOptions(),
  21     lessOptions: {
  22       paths: ['public/less'],
  23       globalVars: {
  24         'target-env': '"mobile"'
  25       }
  26     },
  27     streamTransform: function(stream) {
  28       return stream.pipe(
  29         postCssTransform({
  30           browsers: [
  31             'last 4 ios_saf versions',
  32             'last 4 and_chr versions',
  33             'last 4 and_ff versions',
  34             'last 2 ie_mob versions'
  35           ]
  36         })
  37       );
  38     }
  39   }
  40 );
  41
  42 gulp.task('css:compile:mobile', function() {
  43   return cssMobileStyleBuilder.build();
  44 });
  45
  46 var cssWebStyleBuilder = styleBuilder(
  47   [
  48     'public/less/trpAppsPage.less',
  49     'public/less/error-page.less',
  50     'public/less/error-layout.less',
  51     'public/less/generic-layout.less',
  52     'public/less/trpHooks.less',
  53     'public/less/login.less',
  54     'public/less/login-upgrade-landing.less',
  55     'public/less/explore.less',
  56     'public/less/router-chat.less',
  57     'public/less/router-app.less',
  58     'public/less/router-nli-chat.less',
  59     'public/less/router-embed-chat.less',
  60     'public/less/router-nli-embed-chat.less',
  61     'public/less/router-archive-home.less',
  62     'public/less/router-archive-links.less',
  63     'public/less/router-archive-chat.less',
  64     'public/less/router-admin-dashboard.less',
  65     'public/less/homepage.less',
  66     'public/less/userhome.less',
  67     'public/less/org-page.less',
  68     'public/less/dark-theme.less'
  69   ],
  70   {
  71     dest: cssDestDir,
  72     watchGlob: cssWatchGlob,
  73     sourceMapOptions: getSourceMapOptions(),
  74     lessOptions: {
  75       paths: ['public/less'],
  76       globalVars: {
  77         'target-env': '"web"'
  78       }
  79     },
  80     streamTransform: function(stream) {
  81       return stream.pipe(
  82         postCssTransform({
  83           browsers: ['Safari >= 5', 'last 4 Firefox versions', 'last 4 Chrome versions', 'IE >= 10']
  84         })
  85       );
  86     }
  87   }
  88 );
  89
  90 gulp.task('css:compile:desktop', function() {
  91   return cssWebStyleBuilder.build();
  92 });
  93
  94 gulp.task('css:watch', function() {
  95   cssWebStyleBuilder.build();
  96   cssMobileStyleBuilder.build();
  97
  98   cssMobileStyleBuilder.startWatching();
  99   cssWebStyleBuilder.startWatching();
 100 });