Looks stable and stuff

.editorconfig

@@ -0,0 +1,10 @@
+# EditorConfig is awesome: http://EditorConfig.org
+
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+charset = utf-8
+indent_style = space
+indent_size = 2

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,137 @@
+Configurable gulp-based assets builder
+======================================
+
+A small collection of gulp tasks we use to build front-end code, for fully static or CMS-based website projects. Includes Sass, Autoprefixer, SVG sprites and JS minification.
+
+
+Highlights
+----------
+
+-   Flexible configuration, in a separate file
+-   Each build task is only active if the corresponding config is set
+-   System notifications for errors (using [node-notifier][])
+-   Logs information on output files (using [gulp-size][])
+
+
+How to use this repo
+--------------------
+
+This is an example for using [gulp][], not a library. We recommend [downloading a zip of this repo][ZIP] and using it as a starting point for a project, changing the directory structure or the JS code as you see fit.
+
+Console usage uses npm scripts:
+
+```
+# Install dependencies (requires Node.js)
+npm install
+
+# Build CSS/JS/SVG once
+npm run build
+
+# Build CSS/JS/SVG on changes
+npm run watch
+
+# (Optional) check that tasks are correctly configured
+npm run list
+```
+
+
+Changing the location of the gulp scripts
+-----------------------------------------
+
+-   If you rename the `assets/config.js` file or move it somewhere else, update the `assets` property in the `"config"` section of `package.json`.
+
+-   If you rename the `gulp` directory or move it somewhere else, update the `--gulpfile` parameters in the `"scripts"` section of `package.json`.
+
+
+Configuring tasks
+-----------------
+
+Configuration is in `assets/config.js` (by default). Config objects have the following properties:
+
+-   Required `src`: paths or glob patterns (string or array of strings).
+-   Required `dest`: a single path (string).
+-   Optional `watch`: either the value `true` to reuse the `src` config, or a different set of paths or glob patterns (string or array of strings).
+
+Some tasks may offer additional options. See the next section for details.
+
+### Sass → Autoprefixer → CSS
+
+Config key: `sass`<br>
+Task script: `gulp/builders/sass.js`
+
+```js
+{
+  // (Required) Source can be a single Sass stylesheet
+  // or pattern, or an array of paths or patterns
+  src: 'assets/styles/*.scss',
+  // (Required) Destination must be a folder
+  dest: 'public/css',
+  // (Optional) File patterns to watch for changes
+  watch: 'assets/styles/**/*.scss',
+  // (Optional) Autoprefixer: target browsers
+  browsers: ['last 3 versions']
+}
+```
+
+### JS scripts → Concatenated and minified JS
+
+Config key: `jsconcat`<br>
+Task script: `gulp/builders/jsconcat.js`
+
+```js
+{
+  // (Required) Source files. Like with other tasks, we can
+  // provide an array of paths instead of a single path.
+  src: [ 'assets/libs/hello.js',
+         'assets/scripts/*.js' ],
+  // (Required) Destination must be a file name
+  dest:  'public/js/main.js',
+  // (Optional) File patterns to watch for changes, or `true`
+  // to use the same value as the src property
+  watch: true
+}
+```
+
+### SVG images → [SVG symbol sprites][SVG_SPRITES]
+
+Config key: `svgsprite`<br>
+Task script: `gulp/builders/svgsprite.js`
+
+```js
+{
+  // (Required) Source SVG images
+  src: 'assets/icons/main/*.svg',
+  // (Required) Destination must be a file name
+  dest: 'public/svg/main.svg',
+  // (Optional) File patterns to watch for changes, or `true`
+  // to use the same value as the src property
+  watch: true,
+}
+```
+
+### More than one build per task?
+
+Each task can accept several config objects, to output several result files. You need to provide a full config object for each `dest` file.
+
+```js
+{
+  …,
+  jsconcat: [
+    { src:  'assets/scripts/topic1/*.js',
+      dest: 'public/svg/main.svg',
+      watch: true
+    },
+    { src:  'assets/scripts/topic2/*.js',
+      dest: 'public/svg/main.svg'
+    }
+  ],
+  …
+}
+```
+
+
+[gulp]: http://gulpjs.com/
+[gulp-size]: https://www.npmjs.com/package/gulp-size
+[node-notifier]: https://www.npmjs.com/package/node-notifier
+[SVG_SPRITES]: http://fvsch.com/code/svg-icons/how-to/
+[ZIP]: releases/latest

assets/config.js

@@ -0,0 +1,33 @@
+/**
+ * Exemple configuration for assets-builder
+ * 
+ * There’s nothing magical or even standard in this config,
+ * these are just the values expected by our custom tasks.
+ * 
+ * For details, see:
+ *   README.md
+ *   gulp/index.js
+ *   gulp/builders/*.js
+ */
+module.exports = {
+  sass: {
+    src:   'assets/styles/*.scss',
+    dest:  'public/css',
+    watch: 'assets/styles/**/*.scss',
+    browsers: ['last 3 versions', 'ie >= 11', 'ios >= 9', 'android >= 5']
+  },
+  jsconcat: {
+    src: [
+      'assets/libs/hello.js',
+      'assets/demo-of-missing-file.min.js',
+      'assets/scripts/*.js'
+    ],
+    dest:  'public/js/main.js',
+    watch: true
+  },
+  svgsprite: {
+    src:   'assets/icons/*.svg',
+    dest:  'public/svg/sprite.svg',
+    watch: true
+  }
+}

assets/libs/hello.js

@@ -0,0 +1,6 @@
+/**
+ * Log a message
+ */
+function hello(msg) {
+    console && console.log(msg + ', lol');
+}

assets/scripts/test.js

@@ -0,0 +1,2 @@
+// Log a boring message
+hello('Hello world');

assets/styles/test.scss

@@ -0,0 +1,9 @@
+// Test Sass stylesheet
+
+$color-test: #0ff;
+
+.test {
+    display: flex;
+    color: $color-test + red;
+    background-color: $color-test - #0cc;
+}

gulp/builders/jsconcat.js

@@ -0,0 +1,35 @@
+'use strict'
+// ----------------------------------
+// Builder: concat and minify JS code
+// ----------------------------------
+
+// Core tools
+var concat     = require('gulp-concat')
+var gulp       = require('gulp')
+var path       = require('path')
+var plumber    = require('gulp-plumber')
+var sourcemaps = require('gulp-sourcemaps')
+var uglify     = require('gulp-uglify')
+
+// Helpers
+var notify     = require('../helpers/notify.js')
+var showSize   = require('../helpers/size.js')
+
+/**
+ * Make a JS build, optionally minified
+ * @param {object} config
+ * @property {Array|string} config.src - glob patterns of files to concatenate
+ * @property {string} config.dest - output file name
+ * @returns {*}
+ */
+module.exports = function concatJS(config) {
+  var dest = path.parse(config.dest)
+  return gulp.src(config.src)
+    .pipe( plumber(notify) )
+    .pipe( sourcemaps.init() )
+    .pipe( concat(dest.base) )
+    .pipe( uglify() )
+    .pipe( showSize(dest.dir) )
+    .pipe( sourcemaps.write('.') )
+    .pipe( gulp.dest(dest.dir) )
+}

gulp/builders/sass.js

@@ -0,0 +1,38 @@
+'use strict'
+// ----------------------------
+// Builder: Sass + Autoprefixer
+// ----------------------------
+
+// Core tools
+var autoprefix = require('gulp-autoprefixer')
+var gulp       = require('gulp')
+var plumber    = require('gulp-plumber')
+var sass       = require('gulp-sass')
+var sourcemaps = require('gulp-sourcemaps')
+
+// Helpers
+var notify     = require('../helpers/notify.js')
+var showSize   = require('../helpers/size.js')
+
+/**
+ * Build one or more Sass stylesheets
+ * @param {Object} config
+ * @property {Array|string} config.src - glob patterns of Sass files to build
+ * @property {string} config.dest - output file name
+ * @property {string} config.browsers - Autoprefixer browser compat
+ * @returns {*}
+ */
+module.exports = function buildSass(config) {
+  var prefixOpts = {}
+  if (config.browsers) {
+    prefixOpts.browsers = config.browsers
+  }
+  return gulp.src( config.src )
+    .pipe( plumber(notify) )
+    .pipe( sourcemaps.init() )
+    .pipe( sass({outputStyle: 'compressed'}) )
+    .pipe( autoprefix(prefixOpts) )
+    .pipe( showSize(config.dest) )
+    .pipe( sourcemaps.write('.') )
+    .pipe( gulp.dest(config.dest) )
+}

gulp/builders/svgsprite.js

@@ -0,0 +1,44 @@
+'use strict'
+// ---------------------------
+// Builder: SVG symbol sprites
+// ---------------------------
+
+// Core tools
+var gulp       = require('gulp')
+var path       = require('path')
+var plumber    = require('gulp-plumber')
+var svgSprite  = require('gulp-svg-sprite')
+
+// Helpers
+var notify     = require('../helpers/notify.js')
+var showSize   = require('../helpers/size.js')
+
+/**
+ * Build and write a SVG symbol sprite
+ * @param {object} config
+ * @property {Array|string} config.src - glob patterns of SVG images
+ * @property {string} config.dest - output file name
+ * @property {string} config.prefix - prefix for symbol id attributes
+ * @property {boolean} config.inline - for inlining in HTML documents
+ * @returns {*}
+ */
+module.exports = function makeSvgSprite(config) {
+  // Prepare options
+  var dest = path.parse(config.dest)
+  var opts = {
+    mode: { symbol: { dest: '.', sprite: dest.base } },
+    shape: { id: {separator: '-'}, transform: ['svgo'] }
+  }
+  if (config.inline) {
+    opts.mode.symbol.inline = true
+  }
+  if (config.prefix) {
+    opts.shape.id.generator = config.prefix + '%s'
+  }
+  // Build sprite
+  return gulp.src( config.src )
+    .pipe( plumber(notify) )
+    .pipe( svgSprite(opts) )
+    .pipe( showSize(dest.dir) )
+    .pipe( gulp.dest(dest.dir) )
+}

gulp/helpers/missing.js

@@ -0,0 +1,23 @@
+'use strict'
+
+var glob = require('glob')
+var notify = require('./notify.js')
+
+/**
+ * Check that a glob patterns actually matches at least
+ * one file, and notify users otherwise. Asynchronous.
+ * @param {string} pattern - glob pattern
+ * @param {string} taskId
+ */
+module.exports = function(pattern, taskId) {
+  if (typeof pattern !== 'string') return
+  glob(pattern, function(err, found) {
+    if (err) notify(err)
+    if (found.length === 0) {
+      notify({
+        title: '[' + taskId + '] Warning: file(s) not found',
+        message: 'For path: ' + pattern
+      })
+    }
+  })
+}