Issue 6210 - Implement Subscription (Double-opt-in) template for newsletter

gulpfile.js

+/*!
+ * This file is part of adblockplus.org.

[juliandoucette, 2018/01/04 02:34:22]

This is actually part of eyeomail.com?

[ire, 2018/01/04 11:14:41]

Done.

+ * Copyright (C) 2017-present eyeo GmbH
+ *
+ * adblockplus.org 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.
+ *
+ * adblockplus.org 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 adblockplus.org.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+const gulp = require("gulp");
+const gutil = require("gulp-util");
+const rename = require("gulp-rename");
+const sass = require("gulp-sass");
+const postcss = require("gulp-postcss");
+const scss = require("postcss-scss");
+const autoprefixer = require("autoprefixer");
+const replace = require("replace");
+const fs = require('fs');
+
+/******************************************************************************
+ * CSS
+ ******************************************************************************/
+
+gulp.task("compileCss", function() {
+  return gulp.src("./scss/main.scss")
+    .pipe(postcss([autoprefixer()], {syntax: scss}).on("error", gutil.log))
+    .pipe(sass({outputStyle: "compact"}).on("error", gutil.log))

[juliandoucette, 2018/01/04 02:34:19]

I don't think we should minify without source maps (which I am assuming that we
will not include inline because that would kindof defeat the purpose of
minifying in the first place / there is not a lot of css).

[ire, 2018/01/04 11:14:41]

This isn't minifying?

+    .pipe(gulp.dest("./css"));
+});
+
+gulp.task("inlineCss", function() {
+  return fs.readFile('./css/main.css', 'utf8', function (err, styles) {

[juliandoucette, 2018/01/04 02:34:22]

NIT: single quotes.

[ire, 2018/01/04 11:14:40]

Done.

+    if (err) throw err;
+
+    const replacement = `<!-- styles:start -->

[juliandoucette, 2018/01/04 02:34:23]

NIT: Why not shorten this e.g. `<style>${styles}</style>` and place it below?

[ire, 2018/01/04 11:14:41]

I think it looks better when the styles start on their own line. Like:

```
<style>
  // styles here
</style>
```

This is consistent with how we nest other HTML elements

+<style>
+${styles}
+</style>
+<!-- styles:end -->`;
+
+    replace({
+      regex: /<!-- styles:start -->([\s\S]*?)<!-- styles:end -->/,

[juliandoucette, 2018/01/04 02:34:23]

NIT: Why not shorten this? e.g. `<!-- styles /-->`

[ire, 2018/01/04 11:14:40]

This is "sort of" (in mega quotes) a convention for autogenerated inlined
content in my experience.

Also, I prefer a different format to make it clear that this is injected
content. 

+      replacement: replacement,
+      paths: ['./index.html', 'backclick.html'],

[juliandoucette, 2018/01/04 02:34:22]

NIT: Can't we *just* do this to backclick.html?

[ire, 2018/01/04 11:14:42]

I was keeping the other file around so that we can test the HTML/CSS without
needing backclick, but we probably don't need that anymore. Removed.

+      recursive: true,

[juliandoucette, 2018/01/04 02:34:21]

NIT: I don't think recursive or silent are necessary for one replacement.

[ire, 2018/01/04 11:14:40]

I just copied the default example here. Is there a reason to *not* use these
options?

+      silent: true,
+    });
+  });
+});
+
+gulp.task("css", ["compileCss", "inlineCss"]);
+
+/******************************************************************************
+ * Watch
+ ******************************************************************************/
+
+gulp.task("watch", function() {
+  gulp.watch("./scss/**/*.scss", ["css"]);
+});
+
+/******************************************************************************
+ * Default
+ ******************************************************************************/
+
+gulp.task("default", ["css", "watch"]);