Issue 6104 - Minified code in help center repository

gulpfile.js

 /*!

[juliandoucette, 2017/11/29 23:30:36]

Tabs! :O

[ire, 2017/11/30 10:04:43]

Oops :O !

Fixed :)

  * This file is part of help.eyeo.com.
  * Copyright (C) 2017-present eyeo GmbH
  *
  * help.eyeo.com is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
  * the Free Software Foundation, either version 3 of the License, or
  * (at your option) any later version.
  *
  * help.eyeo.com is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
  *
  * You should have received a copy of the GNU General Public License
  * along with help.eyeo.com.  If not, see <http://www.gnu.org/licenses/>.
  */
 
 const gulp = require('gulp');
 const gutil = require('gulp-util');
+const sourcemaps = require('gulp-sourcemaps');
+const rename = require('gulp-rename');
+
+/**************************************************************************
+ * CSS

[juliandoucette, 2017/11/29 23:30:36]

There seems to be something wrong with the SCSS source mapping. It only finds
variables.scss.

[ire, 2017/11/30 10:04:43]

Fixed. It was because I was calling sourcemaps.write('./') twice, which it
appears you should only do once, So I had to separate the tasks for the default
and minified CSS versions

+ **************************************************************************/
+
 const sass = require('gulp-sass');
 const postcss = require('gulp-postcss');
 const scss = require('postcss-scss');
 const autoprefixer = require('autoprefixer');
+const cleanCSS = require('gulp-clean-css');
 
 gulp.task('css', function() {
-    return gulp.src('./static/scss/main.scss')
+        return gulp.src('./src/scss/main.scss')
+                .pipe(sourcemaps.init())
                 .pipe(postcss([autoprefixer()], {syntax: scss}).on('error', gutil.log))
                 .pipe(sass().on('error', gutil.log))
+                .pipe(sourcemaps.write('./'))
+                .pipe(gulp.dest('./static/css'))
+                .pipe(cleanCSS())
+                .pipe(rename('main.min.css'))
+                .pipe(sourcemaps.write('./'))
                 .pipe(gulp.dest('./static/css'));
 });
 
-gulp.task('watch', function() {
-  gulp.watch('./static/scss/**/*.scss', ['css']);
+/**************************************************************************
+ * JS
+ **************************************************************************/
+
+const minify = require('gulp-minify');

[juliandoucette, 2017/11/29 23:30:36]

Requires usually go at the top

[ire, 2017/11/30 10:04:43]

Is that a coding style thing? I thought it made sense to separate them by each
task

[juliandoucette, 2017/12/04 10:49:37]

"<kzar> julian: Yea. It's certainly a convention to generally require stuff at
the top of the file, but not a rule as far as I know."

I guess it's not a code style rule because their are circumstances where it
makes sense e.g. conditional requires and circular dependencies. I think that we
should keep them at the top for the sake of consistency. 

+
+gulp.task('js', function() {
+        return gulp.src(['./src/js/*.js'])
+                .pipe(sourcemaps.init())
+                .pipe(minify({
+                        ext: {src:'.js', min:'.min.js'},
+                        preserveComments: 'some'
+                }))
+                .pipe(sourcemaps.write('./'))
+                .pipe(gulp.dest('./static/js'))
 });
 
-gulp.task('default', ['css', 'watch']);
+gulp.task('js-vendor', function() {
+        return gulp.src(['./src/js/vendor/*.js'])
+                .pipe(sourcemaps.init())
+                .pipe(minify({
+                        ext: {src:'.js', min:'.min.js'},
+                        preserveComments: 'some'
+                }))
+                .pipe(sourcemaps.write('./'))
+                .pipe(gulp.dest('./static/js/vendor'))
+});
+
+/**************************************************************************
+ * Watch
+ **************************************************************************/
+
+gulp.task('watch', function() {
+        gulp.watch('./src/scss/**/*.scss', ['css']);
+        gulp.watch('./src/js/*.js', ['js']);
+        gulp.watch('./src/js/vendor/*.js', ['js-vendor']);
+});
+
+/**************************************************************************
+ * Default
+ **************************************************************************/
+
+gulp.task('default', ['css', 'js', 'js-vendor', 'watch']);