From 64afa9c31c6dd0fe9b6b7faf43dea4b2ec354233 Mon Sep 17 00:00:00 2001 From: Carlo Alberto Degli Atti Date: Sat, 25 Jul 2015 16:48:37 +0200 Subject: [PATCH 1/3] Should copy vendors css and fonts to dist folders as reported here: paislee/healthy-gulp-angular/#3 --- app/components/home.html | 7 ++++++- app/index.html | 2 +- bower.json | 6 ++++-- gulpfile.js | 32 +++++++++++++++++++++++++++++--- package.json | 10 ++++++---- 5 files changed, 46 insertions(+), 11 deletions(-) diff --git a/app/components/home.html b/app/components/home.html index 250ae65..fc8fc63 100644 --- a/app/components/home.html +++ b/app/components/home.html @@ -3,4 +3,9 @@

-

\ No newline at end of file +

+ + + diff --git a/app/index.html b/app/index.html index 0612f0d..7d9a413 100644 --- a/app/index.html +++ b/app/index.html @@ -24,4 +24,4 @@ - \ No newline at end of file + diff --git a/bower.json b/bower.json index a71e622..2c1c3c7 100644 --- a/bower.json +++ b/bower.json @@ -7,7 +7,9 @@ "angular": "^1.3.12", "angular-ui-router": "^0.2.11", "angular-animate": "^1.3.0", - "foundation": "~5.5.1" + "foundation": "~5.5.1", + "angular-bootstrap": "~0.13.1", + "bootstrap-css": "~3.3.4" }, "devDependencies": { "angular-mocks": "^1.2.23" @@ -17,4 +19,4 @@ "main": "js/foundation.js" } } -} \ No newline at end of file +} diff --git a/gulpfile.js b/gulpfile.js index 0001e45..28709de 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -20,6 +20,9 @@ var paths = { scriptsDevServer: 'devServer/**/*.js' }; +var vendorScriptsRegex = /.js$/i; +var vendorStylesRegex = /.css$/i; + // == PIPE SEGMENTS ======== var pipes = {}; @@ -68,7 +71,10 @@ pipes.builtVendorScriptsDev = function() { }; pipes.builtVendorScriptsProd = function() { - return gulp.src(bowerFiles()) + return gulp.src(bowerFiles({ + filter: function(e) { return vendorScriptsRegex.test(e); } + }) + ) .pipe(pipes.orderedVendorScripts()) .pipe(plugins.concat('vendor.min.js')) .pipe(plugins.uglify()) @@ -107,6 +113,16 @@ pipes.builtStylesDev = function() { .pipe(gulp.dest(paths.distDev)); }; +pipes.builtVendorStyles = function() { + return gulp.src(bowerFiles({ + filter: function(e) { return vendorStylesRegex.test(e); } + }) + ) + .pipe(plugins.concat('vendor.min.css')) + .pipe(plugins.minifyCss()) + .pipe(gulp.dest(paths.distProd + "/styles")); +} + pipes.builtStylesProd = function() { return gulp.src(paths.styles) .pipe(plugins.sourcemaps.init()) @@ -117,6 +133,14 @@ pipes.builtStylesProd = function() { .pipe(gulp.dest(paths.distProd)); }; +pipes.processedFonts = function(base_path) { + return gulp.src('./bower_components/**/*.{ttf,woff,eof,svg,woff2}') + .pipe(plugins.rename(function (path) { + path.dirname = "/"; + })) + .pipe(gulp.dest(base_path + '/fonts')); +}; + pipes.processedImagesDev = function() { return gulp.src(paths.images) .pipe(gulp.dest(paths.distDev + '/images/')); @@ -156,22 +180,24 @@ pipes.builtIndexProd = function() { var vendorScripts = pipes.builtVendorScriptsProd(); var appScripts = pipes.builtAppScriptsProd(); var appStyles = pipes.builtStylesProd(); + var vendorStyles = pipes.builtVendorStyles(); return pipes.validatedIndex() .pipe(gulp.dest(paths.distProd)) // write first to get relative path for inject .pipe(plugins.inject(vendorScripts, {relative: true, name: 'bower'})) .pipe(plugins.inject(appScripts, {relative: true})) .pipe(plugins.inject(appStyles, {relative: true})) + .pipe(plugins.inject(vendorStyles, {relative: true, name: 'bower'})) .pipe(plugins.htmlmin({collapseWhitespace: true, removeComments: true})) .pipe(gulp.dest(paths.distProd)); }; pipes.builtAppDev = function() { - return es.merge(pipes.builtIndexDev(), pipes.builtPartialsDev(), pipes.processedImagesDev()); + return es.merge(pipes.builtIndexDev(), pipes.builtPartialsDev(), pipes.processedFonts(paths.distDev), pipes.processedImagesDev()); }; pipes.builtAppProd = function() { - return es.merge(pipes.builtIndexProd(), pipes.processedImagesProd()); + return es.merge(pipes.builtIndexProd(), pipes.processedFonts(paths.distProd), pipes.processedImagesProd()); }; // == TASKS ======== diff --git a/package.json b/package.json index 17c00d3..b1f9377 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "express": "^4.7.2", "gulp": "^3.8.10", "gulp-angular-filesort": "^1.0.4", + "gulp-bower-assets": "0.0.3", "gulp-concat": "^2.4.3", "gulp-htmlhint": "0.0.9", "gulp-htmlmin": "^1.0.0", @@ -23,13 +24,13 @@ "gulp-nodemon": "^1.0.5", "gulp-order": "^1.1.1", "gulp-print": "^1.1.0", - "gulp-rename": "^1.2.0", + "gulp-rename": "^1.2.2", "gulp-sass": "^1.3.2", "gulp-sourcemaps": "^1.3.0", "gulp-uglify": "^1.1.0", "jshint-stylish": "^1.0.0", - "karma": "^0.10", - "karma-junit-reporter": "^0.2.2", + "karma": "^0.13.3", + "karma-junit-reporter": "^0.3.3", "main-bower-files": "^2.5.0", "method-override": "^2.1.2", "protractor": "^1.1.1", @@ -40,5 +41,6 @@ "postinstall": "bower install", "prestart": "npm install", "start": "node server.js" - } + }, + "dependencies": {} } From 955f4ef935348160f732fb2c0ef9251ed2952668 Mon Sep 17 00:00:00 2001 From: Carlo Alberto Degli Atti Date: Tue, 28 Jul 2015 11:25:42 +0200 Subject: [PATCH 2/3] added less support to vendor files and fixed filter in js dev vendor scripts --- bower.json | 2 +- gulpfile.js | 38 +++++++++++++++++++++++++++++++------- package.json | 1 + 3 files changed, 33 insertions(+), 8 deletions(-) diff --git a/bower.json b/bower.json index 2c1c3c7..25e9482 100644 --- a/bower.json +++ b/bower.json @@ -9,7 +9,7 @@ "angular-animate": "^1.3.0", "foundation": "~5.5.1", "angular-bootstrap": "~0.13.1", - "bootstrap-css": "~3.3.4" + "bootstrap": "~3.3.5" }, "devDependencies": { "angular-mocks": "^1.2.23" diff --git a/gulpfile.js b/gulpfile.js index 28709de..2d27d0a 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -20,8 +20,9 @@ var paths = { scriptsDevServer: 'devServer/**/*.js' }; -var vendorScriptsRegex = /.js$/i; -var vendorStylesRegex = /.css$/i; +var jsScriptsRegex = /.js$/i; +var cssStylesRegex = /.css$/i; +var lessStylesRegex = /.less$/i; // == PIPE SEGMENTS ======== @@ -66,13 +67,16 @@ pipes.builtAppScriptsProd = function() { }; pipes.builtVendorScriptsDev = function() { - return gulp.src(bowerFiles()) + return gulp.src(bowerFiles({ + filter: function(e) { return jsScriptsRegex.test(e); } + }) + ) .pipe(gulp.dest('dist.dev/bower_components')); }; pipes.builtVendorScriptsProd = function() { return gulp.src(bowerFiles({ - filter: function(e) { return vendorScriptsRegex.test(e); } + filter: function(e) { return jsScriptsRegex.test(e); } }) ) .pipe(pipes.orderedVendorScripts()) @@ -113,11 +117,29 @@ pipes.builtStylesDev = function() { .pipe(gulp.dest(paths.distDev)); }; -pipes.builtVendorStyles = function() { +pipes.buildVendorStylesLess = function() { + return gulp.src(bowerFiles({ + filter: function(e) { return lessStylesRegex.test(e); } + }) + ) + .pipe(plugins.less({ }) + ) +} + +pipes.builtVendorCssStyles = function() { return gulp.src(bowerFiles({ - filter: function(e) { return vendorStylesRegex.test(e); } + filter: function(e) { return cssStylesRegex.test(e); } }) ) +} + +pipes.builtVendorStylesDev = function() { + return es.merge( pipes.buildVendorStylesLess(), pipes.builtVendorCssStyles() ) + .pipe(gulp.dest(paths.distDev + "/styles" ) ); +} + +pipes.builtVendorStylesProd = function() { + return es.merge( pipes.buildVendorStylesLess(), pipes.builtVendorCssStyles() ) .pipe(plugins.concat('vendor.min.css')) .pipe(plugins.minifyCss()) .pipe(gulp.dest(paths.distProd + "/styles")); @@ -166,12 +188,14 @@ pipes.builtIndexDev = function() { .pipe(pipes.orderedAppScripts()); var appStyles = pipes.builtStylesDev(); + var vendorStyles = pipes.builtVendorStylesDev(); return pipes.validatedIndex() .pipe(gulp.dest(paths.distDev)) // write first to get relative path for inject .pipe(plugins.inject(orderedVendorScripts, {relative: true, name: 'bower'})) .pipe(plugins.inject(orderedAppScripts, {relative: true})) .pipe(plugins.inject(appStyles, {relative: true})) + .pipe(plugins.inject(vendorStyles, {relative: true, name: 'bower'})) .pipe(gulp.dest(paths.distDev)); }; @@ -180,7 +204,7 @@ pipes.builtIndexProd = function() { var vendorScripts = pipes.builtVendorScriptsProd(); var appScripts = pipes.builtAppScriptsProd(); var appStyles = pipes.builtStylesProd(); - var vendorStyles = pipes.builtVendorStyles(); + var vendorStyles = pipes.builtVendorStylesProd(); return pipes.validatedIndex() .pipe(gulp.dest(paths.distProd)) // write first to get relative path for inject diff --git a/package.json b/package.json index b1f9377..8cd7673 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "gulp-htmlmin": "^1.0.0", "gulp-inject": "^1.1.1", "gulp-jshint": "^1.9.2", + "gulp-less": "^3.0.3", "gulp-livereload": "^3.7.0", "gulp-load-plugins": "^0.8.0", "gulp-minify-css": "^0.4.5", From ac9f9a0bbb9a3cf3f4b85d49b4143af57daf266a Mon Sep 17 00:00:00 2001 From: Carlo Alberto Degli Atti Date: Wed, 29 Jul 2015 07:47:55 +0200 Subject: [PATCH 3/3] better strategy to copy fonts --- app/components/home.html | 19 +++++++++++-------- bower.json | 4 ++-- gulpfile.js | 18 +++++++++++++++--- 3 files changed, 28 insertions(+), 13 deletions(-) diff --git a/app/components/home.html b/app/components/home.html index fc8fc63..bf358bf 100644 --- a/app/components/home.html +++ b/app/components/home.html @@ -1,11 +1,14 @@ -Home page. +
+

Home page.

-

-

-

+

+

+

- - +

Main features

+
    +
  • Boostrap
    • +
  • Font-Awesome
    • +
+
diff --git a/bower.json b/bower.json index 25e9482..b0ef7f6 100644 --- a/bower.json +++ b/bower.json @@ -7,9 +7,9 @@ "angular": "^1.3.12", "angular-ui-router": "^0.2.11", "angular-animate": "^1.3.0", + "bootstrap": "~3.3.5", "foundation": "~5.5.1", - "angular-bootstrap": "~0.13.1", - "bootstrap": "~3.3.5" + "font-awesome": "~4.3.0" }, "devDependencies": { "angular-mocks": "^1.2.23" diff --git a/gulpfile.js b/gulpfile.js index 2d27d0a..0143ede 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -23,6 +23,7 @@ var paths = { var jsScriptsRegex = /.js$/i; var cssStylesRegex = /.css$/i; var lessStylesRegex = /.less$/i; +var fontsStylesRegex = /.(ttf|woff|eot|svg|woff2)$/i; // == PIPE SEGMENTS ======== @@ -156,11 +157,22 @@ pipes.builtStylesProd = function() { }; pipes.processedFonts = function(base_path) { - return gulp.src('./bower_components/**/*.{ttf,woff,eof,svg,woff2}') + return gulp.src(bowerFiles({ + filter: function(e) { return fontsStylesRegex.test(e); } + }), + {base : 'bower_components'} + ) .pipe(plugins.rename(function (path) { - path.dirname = "/"; + var arrayPath = path.dirname.split("/"); + if (arrayPath.length > 1) { + arrayPath.splice(0,1); + new_path = "../" + arrayPath.join('/'); + } else { + new_path = "./" + } + path.dirname = new_path; })) - .pipe(gulp.dest(base_path + '/fonts')); + .pipe(gulp.dest(base_path + "/styles")); }; pipes.processedImagesDev = function() {