Gulp tasks to minify CSS, JS, and HTML - Polymer about generator-ng-poly HOT 25 OPEN

7d769cb
Implements 1, 2 (ng-annotate), and 5.

Minified Bower assets are manual.

from generator-ng-poly.

gulp build

/* Request 404 error for *.map on dev */
Request URL:http://127.0.0.1:8080/platform.js.map
Remote Address:127.0.0.1:8080
Request Method:GET
Status Code:404 Not Found
Host:127.0.0.1:8080
Referer:http://127.0.0.1:8080/
X-Source-Map-Request-From:inspector

/* CSS working on body tag on dev */
home.css:1
body {
background-color: #e5e5e5;
}

bootstrap.css:881
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333333;
background-color: #ffffff;
}

gulp build --stage prod

/* Request 404 error for *.map on prod */
Request URL:http://127.0.0.1:8080/platform.js.map
Request URL:http://127.0.0.1:8080/angular.min.js.map
Request URL:http://127.0.0.1:8080/angular-animate.min.js.map
Request URL:http://127.0.0.1:8080/angular-cookies.min.js.map
Request URL:http://127.0.0.1:8080/angular-resource.min.js.map
Request URL:http://127.0.0.1:8080/angular-touch.min.js.map
Request URL:http://127.0.0.1:8080/angular-sanitize.min.js.map
Remote Address:127.0.0.1:8080
Request Method:GET
Status Code:404 Not Found
Host:127.0.0.1:8080
Referer:http://127.0.0.1:8080/
X-Source-Map-Request-From:inspector

/* CSS not working on body tag on prod (after concat and minify CSS to one file) */
style.css:1
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}

from generator-ng-poly.

Good catch!

Here's the original Gulp style task,

...
  // less
  stream.queue(gulp.src([
    appStyleFiles,
    bowerDir + 'bootstrap/less/bootstrap.less',
    '!**/*.{scss,styl}'
  ])
    .pipe(less({
      paths: [
        bowerDir + 'bootstrap/less/**/*.less'
      ]
    })))
  ;
...

We need to put add bootstrap.less to the stream first. So changing it to:

...
  // less
  stream.queue(gulp.src([
    bowerDir + 'bootstrap/less/bootstrap.less',
    appStyleFiles,
    '!**/*.{scss,styl}'
  ])
    .pipe(less({
      paths: [
        bowerDir + 'bootstrap/less/**/*.less'
      ]
    })))
  ;
...

will fix the issue of the custom CSS being overridden by Bootstrap.

Thank you for bringing that up.

from generator-ng-poly.

Following angular module minifid version will request map file in last line of code (//# sourceMappingURL=angular.min.js.map), browser's network console will show '404 Not Found' message.

gulp build --stage prod

Request URL:http://127.0.0.1:8080/js/angular.min.js.map
Request URL:http://127.0.0.1:8080/js/angular-animate.min.js.map
Request URL:http://127.0.0.1:8080/js/angular-cookies.min.js.map
Request URL:http://127.0.0.1:8080/js/angular-resource.min.js.map
Request URL:http://127.0.0.1:8080/js/angular-route.min.js.map
Request URL:http://127.0.0.1:8080/js/angular-touch.min.js.map
Request URL:http://127.0.0.1:8080/js/angular-sanitize.min.js.map

from generator-ng-poly.

BrowserSync open browser window too fast before gulp build task finished on first time, so we just only got a blank page and need to click browser's reload button to refresh manually. Force BrowserSync to reload before any gulp watch tasks will help to resolve the problem.

gulp.task('watch', function () {
+  browserSync.reload();
  gulp.watch([unitTestsFiles], ['unitTest']);
  gulp.watch([appMarkupFiles, appScriptFiles, appStyleFiles], ['build', browserSync.reload]);
});

//Before: no force BrowserSync reload on watch task

gulp

[15:12:43] Starting 'clean'...
[15:12:43] Starting 'jshint'...
[15:12:43] Starting 'browser-sync'...
[15:12:43] Finished 'browser-sync' after 3.02 ms
[BS] [DEBUG]: Checking if there's an internet connection...
[BS] [DEBUG]: Resolved, setting online: true
[BS] [DEBUG]: Static Server running (http) ...
[BS] [DEBUG]: Running mode: SERVER
[BS] Local: >>> http://localhost:3000
[BS] External: >>> http://192.168.0.1:3000
[BS] Serving files from: build/
[15:12:43] Finished 'clean' after 93 ms
[15:12:43] Starting 'markup'...
[15:12:43] Starting 'style'...
[15:12:43] Starting 'fonts'...
[15:12:44] Finished 'markup' after 190 ms
[15:12:44] Finished 'style' after 749 ms
[15:12:44] Finished 'fonts' after 748 ms
[15:12:44] gulp-plato: Report generated in report.
[15:12:44] Finished 'jshint' after 895 ms
[15:12:44] Starting 'scripts'...
[BS] [DEBUG]: Browser Connected! (Chrome, version: 36.0.1985.143)
[15:12:44] Finished 'scripts' after 50 ms
[15:12:44] Starting 'inject'...
[15:12:44] Finished 'inject' after 4.61 ms
[15:12:44] Starting 'angularInject'...
[15:12:44] Finished 'angularInject' after 101 ms
[15:12:44] Starting 'build'...
[15:12:44] Finished 'build' after 5.02 μs
[15:12:44] Starting 'dev'...
[15:12:44] Starting 'watch'...
[15:12:44] Finished 'watch' after 14 ms
[15:12:44] Finished 'dev' after 15 ms
[15:12:44] Starting 'default'...
[15:12:44] Finished 'default' after 7.68 μs

//After: force BrowserSync reload on watch task

gulp

[15:15:01] Starting 'clean'...
[15:15:01] Starting 'jshint'...
[15:15:01] Starting 'browser-sync'...
[15:15:01] Finished 'browser-sync' after 3.17 ms
[BS] [DEBUG]: Checking if there's an internet connection...
[BS] [DEBUG]: Resolved, setting online: true
[BS] [DEBUG]: Static Server running (http) ...
[BS] [DEBUG]: Running mode: SERVER
[BS] Local: >>> http://localhost:3000
[BS] External: >>> http://192.168.0.1:3000
[BS] Serving files from: build/
[15:15:01] Finished 'clean' after 87 ms
[15:15:01] Starting 'markup'...
[15:15:01] Starting 'style'...
[15:15:01] Starting 'fonts'...
[15:15:02] Finished 'markup' after 587 ms
[15:15:02] Finished 'style' after 761 ms
[15:15:02] Finished 'fonts' after 772 ms
[15:15:02] gulp-plato: Report generated in report.
[15:15:02] Finished 'jshint' after 906 ms
[15:15:02] Starting 'scripts'...
[BS] [DEBUG]: Browser Connected! (Chrome, version: 36.0.1985.143)
[15:15:02] Finished 'scripts' after 45 ms
[15:15:02] Starting 'inject'...
[15:15:02] Finished 'inject' after 5.66 ms
[15:15:02] Starting 'angularInject'...
[15:15:02] Finished 'angularInject' after 101 ms
[15:15:02] Starting 'build'...
[15:15:02] Finished 'build' after 6.79 μs
[15:15:02] Starting 'dev'...
[15:15:02] Starting 'watch'...
[15:15:02] Finished 'watch' after 19 ms
[15:15:02] Finished 'dev' after 20 ms
[15:15:02] Starting 'default'...
[15:15:02] Finished 'default' after 4.43 μs
[BS] [DEBUG]: Browser Connected! (Chrome, version: 36.0.1985.143)

from generator-ng-poly.

06a9736 The browserSync issue has been fixed. Thank you!

In regards to using sourcemaps, I'm going to raise this up as another issue to also include support for sourcemaps when compiling, concating, and minifying app code.

from generator-ng-poly.

0d8df10 Bower components are automatically injected and minified

from generator-ng-poly.

Something wrong between v0.2.10 to v0.2.13

//  *   gulp/build.js:92
    .pipe($.if(isProd, $.ngHtml2js({
      moduleName: require('../package.json').name,
      declareModule: false
    })))

//  *   gulp/build.js:97
//  (Bug)
    .pipe(jsFilter)
    .pipe($.if(isProd, $.angularFilesort()))
    .pipe($.if(isProd, $.concat('app.js')))
    .pipe($.if(isProd, $.ngAnnotate()))
    .pipe($.if(isProd, $.uglify()))
    .pipe($.if(isProd, $.rev()))
-    .pipe(gulp.dest(buildJs));
+    .pipe(gulp.dest(buildJs))
+    .pipe(jsFilter.restore());


//  *   protractor.config.js:4 
//  (e2e test for Chrome version over 35)
-    browserName: 'chrome'
+    browserName: 'chrome',
+    chromeOptions: {
+      args: ['--test-type']
+    }


//  *   package.json:2 
//  (ngHtml2js get from this)
-"name": "track",
+"name": "<%= appName %>",

from generator-ng-poly.

6a1e253 Thank you. This adds your fixes.

from generator-ng-poly.

The wiredep should not be using the bootstrap.js with the angular-ui-bootstrap.js (ui-bootstrap-tpls.js) library for 'bowerCopy' gulp task .
http://stackoverflow.com/questions/24104336/dropdown-of-navbar-is-double-clicked

from generator-ng-poly.

Thank you. If you're needing a fix right now, you can add an exclude option to wiredep:

$.wiredep({exclude: [/bootstrap[.]js/]})

This will prevent bootstrap.js from being injected. I'll try to get this added to the generator tomorrow.

from generator-ng-poly.

f54cc6b Add wiredep exclude

from generator-ng-poly.

'browserSync' task should be start after 'build', not parallel task run with 'build'.

// * Gulpfile.js:7
-gulp.task('dev', ['build', 'browserSync'], function () {
+gulp.task('dev', ['build'], function () {
+  gulp.start('browserSync');
  gulp.start('watch');
});

jsFilter.restore() should be put in last line, otherwise all .js and .html will be copy to js folder.

// * gulp\build.js:99
    .pipe(jsFilter)
    .pipe($.if(isProd, $.angularFilesort()))
    .pipe($.if(isProd, $.concat('app.js')))
    .pipe($.if(isProd, $.ngAnnotate()))
    .pipe($.if(isProd, $.uglify()))
    .pipe($.if(isProd, $.rev()))
-    .pipe(jsFilter.restore())
-    .pipe(gulp.dest(buildConfig.buildJs));
+    .pipe(gulp.dest(buildConfig.buildJs))
+    .pipe(jsFilter.restore());

from generator-ng-poly.

d4dcafa Fixes both of these issues. Thank you!

from generator-ng-poly.

The jsFilter.restore() must be added at last line, because 'gulp --stage prod' will report ngHtml2js error on Chrome console when didn't have jsFilter.restore() at last line.

// * gulp/build.js:104
  .pipe($.if(isProd, $.concat('app.js'))) 
  .pipe($.if(isProd, $.ngAnnotate()))
  .pipe($.if(isProd, $.uglify()))
  .pipe($.if(isProd, $.rev()))<% if (polymer) { %>
  .pipe($.addSrc($.mainBowerFiles({filter: /platform/})))<% } %> 
-  .pipe(gulp.dest(buildConfig.buildJs));
+  .pipe(gulp.dest(buildConfig.buildJs))
+  .pipe(jsFilter.restore());

from generator-ng-poly.

9489b7c Adds this line

That's odd. I'm not getting the same error with the line missing. Adding the line didn't seem to change anything for me either, so adding it for those getting the issue. Thanks again.

from generator-ng-poly.

Recommand imagemin only run on production stage to save time for build up on development stage. It's only save small amount of space, but spent more time for build and watch tasks.

// * gulp/build.js
// copy and optimize images into build directory
gulp.task('images', ['clean'], function () {
  return gulp.src(appImages)
-    .pipe($.imagemin())
+    .pipe($.if(isProd, $.imagemin()))
    .pipe(gulp.dest(buildConfig.buildImages));
})

Recommand to replace the link and script tag's src path from hardcode to build.config.sys, It's easy for resource folder customization.

// * build.config.js
module.exports = {
+  // link directories
+  linkCss: 'css/',
+  linkJs: 'js/',
  // build directories
  buildDir: 'build/',
  buildCss: 'build/css/',
  buildFonts: 'build/fonts/',
  buildImages: 'build/images/',
  buildJs: 'build/js/'
};

// * gulp/build.js
    return gulp.src(buildConfig.buildDir + 'index.html')
      .pipe($.wiredep.stream({
        exclude: [/bootstrap[.]js/],
        fileTypes: {
          html: {
            replace: {
              css: function (filePath) {
-                return '<link rel="stylesheet" href="' + 'css/' + filePath.split('/').pop() + '">';
+                return '<link rel="stylesheet" href="' + buildConfig.linkCss + filePath.split('/').pop() + '">';
              },
              js: function (filePath) {
-                return '<script src="' + 'js/' + filePath.split('/').pop() + '"></script>';
+                return '<script src="' + buildConfig.linkJs + filePath.split('/').pop() + '"></script>';
              }
            }
          }
        }
      }))
      .pipe(gulp.dest(buildConfig.buildDir));

from generator-ng-poly.

64210c4 Imagemin is ran in prod only

1f6d773 I took a different approach with the wiredep replace. I used the buildCss and buildJs, but removed the buildDir portion from both. This way users don't have to repeat themselves as much. If there's something I'm overlooking with this approach and your method takes care of that we can definitely change it to yours.

Thank you again!

from generator-ng-poly.

No error message at gullp-plumber and console for lint task and styles task.

// * gulp/analyze.js
  var coffeeFilter = $.filter('**/*.coffee')
    , jsFilter = $.filter('**/*.js')
    , onError = function (err) {
      $.notify.onError({
-        title: 'Error linting the JS',
+        title: 'Error linting at <%= error.plugin %>',
        subtitle: ' ', //overrides defaults
-        message: ' ', //overrides defaults
+        message: '\n' + err.message.replace(/\u001b\[.*?m/g, ''), //overrides defaults
        sound: ' ' //overrides defaults
      })(err);

      this.emit('end');
    };

  return gulp.src([
    appScriptFiles,
    e2eFiles,
    unitTests
  ])
    .pipe($.plumber({errorHandler: onError}))
    .pipe(coffeeFilter)
    .pipe($.coffeelint())
    .pipe($.coffeelint.reporter())
    .pipe($.coffeelint.reporter('fail'))
    .pipe(coffeeFilter.restore())
    .pipe(jsFilter)
    .pipe($.jshint())
    .pipe($.jshint.reporter('jshint-stylish'))
    .pipe($.jshint.reporter('fail'))
    .pipe($.jscs());

// * gulp/build.js
  var lessFilter = $.filter('**/*.less')
    , scssFilter = $.filter('**/*.scss')
    , stylusFilter = $.filter('**/*.styl')
    , onError = function (err) {
      $.notify.onError({
-        title: 'Syntax error in CSS',
+        title: 'Syntax error at <%= error.plugin %>',
        subtitle: ' ', //overrides defaults
-        message: ' ', //overrides defaults
+        message: '\n' + err.message.replace(/\u001b\[.*?m/g, ''), //overrides defaults
        sound: ' ' //overrides defaults
      })(err);

      this.emit('end');
    };

  return gulp.src([
    appStyleFiles
  ])
    .pipe($.plumber({errorHandler: onError}))
    .pipe(lessFilter)
    .pipe($.less())
    .pipe(lessFilter.restore())
    .pipe(scssFilter)
    .pipe($.sass())
    .pipe(scssFilter.restore())
    .pipe(stylusFilter)
    .pipe($.stylus({
      use: $.nib()
    }))
    .pipe(stylusFilter.restore())

After version 0.4.19, 'npm install -g generator-ng-poly' only have '.npmignore' and no '.gitignore' in generator-ng-poly\app\templates\ folder, and can't build successful.

from generator-ng-poly.

Thanks. I'll add those updated notify messages.

Can you try updating generator-ng-poly? I'm not sure a .npmignore file is getting in there. I don't believe we have any of those in this project. Also odd about the missing .gitignore file.

from generator-ng-poly.

When packaging using just a .gitignore file, npm seems to convert it to an .npmignore file and then include it with the package.

npm/npm#3763

npm info it worked if it ends with ok
npm info using [email protected]
npm info using [email protected]
npm info attempt registry request try #1 at 10:41:39
npm info install [email protected] into d:\javascript\npm
npm info installOne [email protected]
npm info preuninstall [email protected]
npm info uninstall [email protected]
npm info postuninstall [email protected]

npm verb tar unpack d:\javascript\npm-cache\generator-ng-poly\0.4.21\package.tgz
npm verb tar unpacking to d:\javascript\npm\node_modules\generator-ng-poly
npm verb gentlyRm vacuuming d:\javascript\npm\node_modules\generator-ng-poly

npm sill gunzTarPerm extractEntry genBase/index.js
npm sill gunzTarPerm extractEntry app/index.js
npm sill gunzTarPerm extractEntry app/templates/.npmignore
npm sill gunzTarPerm extractEntry app/templates/watch.js
npm sill gunzTarPerm extractEntry app/templates/protractor.config.js
npm sill gunzTarPerm extractEntry app/templates/analyze.js
npm sill gunzTarPerm extractEntry app/templates/_test.js
npm sill gunzTarPerm extractEntry app/templates/_app.js
npm sill gunzTarPerm extractEntry app/templates/_karma.config.js
npm sill gunzTarPerm extractEntry app/templates/_build.config.js
npm sill gunzTarPerm extractEntry app/templates/_build.js
npm sill gunzTarPerm extractEntry app/templates/_gulpfile.js
npm sill gunzTarPerm extractEntry app/templates/_package.json
npm sill gunzTarPerm extractEntry app/templates/.editorconfig
npm sill gunzTarPerm extractEntry app/templates/_index.html
npm sill gunzTarPerm extractEntry app/templates/_index.jade
npm sill gunzTarPerm extractEntry app/templates/_bower.json
npm sill gunzTarPerm extractEntry app/templates/_index.haml
npm sill gunzTarPerm extractEntry app/templates/_readme.md
npm sill gunzTarPerm extractEntry app/templates/_app.coffee
npm sill gunzTarPerm extractEntry app/templates/.jshintrc
npm sill gunzTarPerm extractEntry app/templates/.jscsrc
npm sill gunzTarPerm extractEntry app/templates/.bowerrc
npm sill gunzTarPerm extractEntry value/index.js

from generator-ng-poly.

bb4600f Added gulp-notify info

03f8b56 Added .npmignore file. Thanks for catching that!

from generator-ng-poly.

888d149 Ok, now it's really fixed.

from generator-ng-poly.

cssRebaseUrls and cssUrlAdjuster are not working with URL and DataURI

// * build/app/css/app.css
  background-image: url(https://www.npmjs.com/static/images/npm-logo.svg);
=>
  background-image: url("../https:/www.npmjs.com/static/images/npm-logo.svg");

  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAhUAAAFAAQMAAAAxgRzkAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAACxJREFUeNrtwTEBAAAAwqD1T20KP6AAAAAAAAAAAAAAAAAAAAAAAAAAAAA+BlUAAAEYkol+AAAAAElFTkSuQmCC);
=>
  background-image: url("../app/data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAhUAAAFAAQMAAAAxgRzkAAAAA1BMVEX/+nxBvIAAAAAXRSTlMAQObYZgAAACxJREFUeNrtwTEBAAAAwqD1T20KP6AAAAAAAAAAAAAAAAAAAAAAAAAAAAA+BlUAAAEYkol+AAAAAElFTkSuQmCC");

// * gulp/build.js
-    .pipe($.if(isProd, $.cssRebaseUrls()))
+    .pipe($.if(isProd, $.cssRebaseUrls({
      root: appBase
    })))
-    .pipe($.if(isProd, $.cssUrlAdjuster({
      prepend: '../'
    })))

from generator-ng-poly.

361651a Sorry for the late response. Thank you for bringing this up.

from generator-ng-poly.