Fix for crop tool. Modernized gulp asset build.

.gitignore

@@ -3,3 +3,4 @@ vendor
 composer.lock
 public/css/*.map
 public/js/*.map
+cropper.css

assets/styles/tools/ilab-imgix.scss → assets/css/tools/ilab-imgix.scss

@@ -362,6 +362,31 @@
   }
 }
 
+.imgix-pill-h {
+  & > span.icon {
+    background-image: url(../img/ilab-flip-horizontal-black.svg);
+  }
+}
+
+.imgix-pill-h.pill-selected {
+  & > span.icon {
+    background-image: url(../img/ilab-flip-horizontal-white.svg);
+  }
+}
+
+.imgix-pill-v {
+  & > span.icon {
+    background-image: url(../img/ilab-flip-vertical-black.svg);
+  }
+}
+
+.imgix-pill-v.pill-selected {
+  & > span.icon {
+    background-image: url(../img/ilab-flip-vertical-white.svg);
+  }
+}
+
+
 .imgix-preset-make-default-container {
   align-items: center;
   display: flex;

assets/gulpfile.js

@@ -2,55 +2,33 @@
 var argv         = require('minimist')(process.argv.slice(2));
 var autoprefixer = require('gulp-autoprefixer');
 var browserSync  = require('browser-sync').create();
-var changed      = require('gulp-changed');
 var concat       = require('gulp-concat');
+var changed      = require('gulp-changed');
 var flatten      = require('gulp-flatten');
 var gulp         = require('gulp');
 var gulpif       = require('gulp-if');
 var imagemin     = require('gulp-imagemin');
 var lazypipe     = require('lazypipe');
-var less         = require('gulp-less');
 var merge        = require('merge-stream');
-var cssNano      = require('gulp-cssnano');
+var cleanCSS     = require('gulp-clean-css');
 var plumber      = require('gulp-plumber');
 var runSequence  = require('run-sequence');
 var sass         = require('gulp-sass');
 var sourcemaps   = require('gulp-sourcemaps');
-var uglify       = require('gulp-uglify');
-var babelMinify  = require('gulp-babel-minify');
-
-// See https://github.com/austinpray/asset-builder
+var uglify       = require('gulp-uglify-es').default;
+var babel 		 = require('gulp-babel');
+var browserify   = require('gulp-browserify');
+var webpack 	 = require('webpack-stream');
+var notify       = require('node-notifier');
 var manifest = require('asset-builder')('./manifest.json');
 
-// `path` - Paths to base asset directories. With trailing slashes.
-// - `path.source` - Path to the source files. Default: `assets/`
-// - `path.dist` - Path to the build directory. Default: `dist/`
 var path = manifest.paths;
-
-// `config` - Store arbitrary configuration values here.
 var config = manifest.config || {};
-
-// `globs` - These ultimately end up in their respective `gulp.src`.
-// - `globs.js` - Array of asset-builder JS dependency objects. Example:
-//   ```
-//   {type: 'js', name: 'main.js', globs: []}
-//   ```
-// - `globs.css` - Array of asset-builder CSS dependency objects. Example:
-//   ```
-//   {type: 'css', name: 'main.css', globs: []}
-//   ```
-// - `globs.fonts` - Array of font path globs.
-// - `globs.images` - Array of image path globs.
-// - `globs.bower` - Array of all the main Bower files.
 var globs = manifest.globs;
-
-// `project` - paths to first-party assets.
-// - `project.js` - Array of first-party JS assets.
-// - `project.css` - Array of first-party CSS assets.
 var project = manifest.getProjectGlobs();
 
-// CLI options
 var enabled = {
+    minify: argv.production,
     // Disable source maps when `--production`
     maps: !argv.production,
     // Fail styles task on error when `--production`
@@ -61,16 +39,13 @@ var enabled = {
     stripJSDebug: argv.production
 };
 
-// ## Reusable Pipelines
-// See https://github.com/OverZealous/lazypipe
+var writeToManifest = function(directory) {
+    return lazypipe()
+        .pipe(gulp.dest, path.dist + directory)
+        .pipe(browserSync.stream, {match: '**/*.{js,css}'})
+        .pipe(gulp.dest, path.dist + directory)();
+};
 
-// ### CSS processing pipeline
-// Example
-// ```
-// gulp.src(cssFiles)
-//   .pipe(cssTasks('main.css')
-//   .pipe(gulp.dest(path.dist + 'styles'))
-// ```
 var cssTasks = function(filename) {
     return lazypipe()
         .pipe(function() {
@@ -79,15 +54,12 @@ var cssTasks = function(filename) {
         .pipe(function() {
             return gulpif(enabled.maps, sourcemaps.init());
         })
-        .pipe(function() {
-            return gulpif('*.less', less());
-        })
         .pipe(function() {
             return gulpif('*.scss', sass({
                 outputStyle: 'nested', // libsass doesn't support expanded yet
                 precision: 10,
                 includePaths: ['.'],
-                errLogToConsole: !enabled.failStyleTask
+                errLogToConsole: false
             }));
         })
         .pipe(concat, filename)
@@ -98,8 +70,8 @@ var cssTasks = function(filename) {
                 'opera 12'
             ]
         })
-        .pipe(cssNano, {
-            safe: true
+        .pipe(function(){
+            return gulpif(enabled.minify, cleanCSS());
         })
         .pipe(function() {
             return gulpif(enabled.maps, sourcemaps.write('.', {
@@ -108,68 +80,56 @@ var cssTasks = function(filename) {
         })();
 };
 
-// ### JS processing pipeline
-// Example
-// ```
-// gulp.src(jsFiles)
-//   .pipe(jsTasks('main.js')
-//   .pipe(gulp.dest(path.dist + 'scripts'))
-// ```
 var jsTasks = function(filename) {
     return lazypipe()
         .pipe(function() {
             return gulpif(enabled.maps, sourcemaps.init());
         })
-        .pipe(concat, filename)
-        .pipe(babelMinify, {
-            // compress: {
-            //   'drop_debugger': enabled.stripJSDebug
-            // }
+        // .pipe(babel, {
+        //     presets: ['env']
+        // })
+        // .pipe(webpack)
+        .pipe(function () {
+            return gulpif(enabled.minify, uglify({
+                compress: {
+                    'drop_debugger': enabled.stripJSDebug
+                }
+            }));
         })
+        .pipe(concat, filename)
+        // .pipe(babelMinify, {
+        //   // compress: {
+        //   //   'drop_debugger': enabled.stripJSDebug
+        //   // }
+        // })
         .pipe(function() {
             return gulpif(enabled.maps, sourcemaps.write('.', {
-                sourceRoot: 'js/'
+                sourceRoot: '../../assets/js/'
             }));
         })();
 };
 
-// ### Write to rev manifest
-// If there are any revved files then write them to the rev manifest.
-// See https://github.com/sindresorhus/gulp-rev
-var writeToManifest = function(directory) {
-    return lazypipe()
-        .pipe(gulp.dest, path.dist + directory)
-        .pipe(browserSync.stream, {match: '**/*.{js,css}'})
-        .pipe(gulp.dest, path.dist + directory)();
-};
-
-// ## Gulp tasks
-// Run `gulp -T` for a task summary
-
-// ### Styles
-// `gulp styles` - Compiles, combines, and optimizes Bower CSS and project CSS.
-// By default this task will only log a warning if a precompiler error is
-// raised. If the `--production` flag is set: this task will fail outright.
-gulp.task('styles', function() {
+gulp.task('styles', ['wiredep'], function() {
     var merged = merge();
     manifest.forEachDependency('css', function(dep) {
         var cssTasksInstance = cssTasks(dep.name);
-        if (!enabled.failStyleTask) {
-            cssTasksInstance.on('error', function(err) {
-                console.error(err.message);
-                this.emit('end');
+        cssTasksInstance.on('error', function(err) {
+            console.error(err.message);
+
+            notify.notify({
+                title: 'Styles Compilation Error',
+                message: err.message
             });
-        }
+
+            this.emit('end');
+        });
         merged.add(gulp.src(dep.globs, {base: 'css'})
             .pipe(cssTasksInstance));
     });
     return merged
         .pipe(writeToManifest('css'));
 });
 
-// ### Scripts
-// `gulp scripts` - Runs JSHint then compiles, combines, and optimizes Bower JS
-// and project JS.
 gulp.task('scripts', function() {
     var merged = merge();
     manifest.forEachDependency('js', function(dep) {
@@ -182,26 +142,13 @@ gulp.task('scripts', function() {
         .pipe(writeToManifest('js'));
 });
 
-// ### Fonts
-// `gulp fonts` - Grabs all the fonts and outputs them in a flattened directory
-// structure. See: https://github.com/armed/gulp-flatten
 gulp.task('fonts', function() {
     return gulp.src(globs.fonts)
         .pipe(flatten())
         .pipe(gulp.dest(path.dist + 'fonts'))
         .pipe(browserSync.stream());
 });
 
-// ### Icons
-// `gulp icons` - Grabs font-awesome
-gulp.task('icons', function() {
-    return gulp.src(path.bowerDir + '/font-awesome/fonts/*')
-        .pipe(gulp.dest(path.dist + 'fonts'))
-        .pipe(browserSync.stream());
-});
-
-// ### Images
-// `gulp images` - Run lossless compression on all the images.
 gulp.task('images', function() {
     return gulp.src(globs.images)
         .pipe(imagemin({
@@ -213,44 +160,46 @@ gulp.task('images', function() {
         .pipe(browserSync.stream());
 });
 
-// ### Clean
-// `gulp clean` - Deletes the build folder entirely.
-gulp.task('clean', require('del').bind(null, [path.dist]));
+gulp.task('clean', require('del').bind(null, [path.dist+'js', path.dist+'css'], {force: true}));
+
+gulp.task('wiredep', function() {
+    var wiredep = require('wiredep').stream;
+    return gulp.src(project.css)
+        .pipe(wiredep())
+        .pipe(changed(path.source + 'css', {
+            hasChanged: changed.compareSha1Digest
+        }))
+        .pipe(gulp.dest(path.source + 'css'));
+});
 
-// ### Watch
-// `gulp watch` - Use BrowserSync to proxy your dev server and synchronize code
-// changes across devices. Specify the hostname of your dev server at
-// `manifest.config.devUrl`. When a modification is made to an asset, run the
-// build step for that asset and inject the changes into the page.
-// See: http://www.browsersync.io
 gulp.task('watch', function() {
     browserSync.init({
-        files: ['../resources/views/**/*.php'],
         proxy: config.devUrl,
         ghostMode: false,
         snippetOptions: {
         }
     });
-    gulp.watch([path.source + 'styles/**/*'], ['styles']);
+    gulp.watch([path.source + 'css/**/*'], ['styles', 'styles-built-success']);
     gulp.watch([path.source + 'js/**/*'], ['scripts']);
     gulp.watch([path.source + 'fonts/**/*'], ['fonts']);
     gulp.watch([path.source + 'img/**/*'], ['images']);
-    gulp.watch(['bower.json', 'manifest.json'], ['build']);
+    gulp.watch(['manifest.json'], ['build']);
+});
+
+gulp.task('styles-built-success', function() {
+    notify.notify({
+        title: 'Styles Compiled',
+        message: 'SASS compiled successfully'
+    });
 });
 
-// ### Build
-// `gulp build` - Run all the build tasks but don't clean up beforehand.
-// Generally you should be running `gulp` instead of `gulp build`.
 gulp.task('build', function(callback) {
     runSequence('styles',
         'scripts',
-        ['fonts', 'images', 'icons'],
+        ['fonts', 'images'],
         callback);
 });
 
-
-// ### Gulp
-// `gulp` - Run a complete build. To compile for production run `gulp --production`.
 gulp.task('default', ['clean'], function() {
     gulp.start('build');
-});
+});

assets/manifest.json

@@ -56,23 +56,23 @@
       "main": true
     },
     "ilab-modal.min.css": {
-      "files": "styles/ilab-modal.scss"
+      "files": "css/ilab-modal.scss"
     },
     "ilab-media-setup.min.css": {
-      "files": "styles/ilab-media-setup.scss"
+      "files": "css/ilab-media-setup.scss"
     },
     "ilab-media-upload.min.css": {
-      "files": "styles/ilab-media-upload.scss"
+      "files": "css/ilab-media-upload.scss"
     },
     "ilab-media-tools.min.css": {
       "files": [
         "vendor/cropper/dist/cropper.css",
-        "styles/ilab-media-tools.scss"
+        "css/ilab-media-tools.scss"
       ]
     },
     "ilab-media-tools.settings.min.css": {
       "files": [
-        "styles/ilab-settings.scss"
+        "css/ilab-settings.scss"
       ]
     },
     "images": {
@@ -84,6 +84,6 @@
     "dist": "../public/"
   },
   "config": {
-    "devUrl": "http://example.dev"
+    "devUrl": "http://cms.xandr.dev"
   }
 }