2016-04-26 49 views
1

由供應商檔案我有這樣的主CSS:JHipster - 一些CSS文件並沒有出現在被咕嘟咕嘟

enter image description here

和我的供應商是這樣的:

enter image description here

爲什麼當我運行生產模式時,material-icons.css和md-data-table.css沒有出現?

Gulpfile.js

// Generated on 2016-04-23 using generator-jhipster 3.0.0 
'use strict'; 

var gulp = require('gulp'), 
    rev = require('gulp-rev'), 
    templateCache = require('gulp-angular-templatecache'), 
    htmlmin = require('gulp-htmlmin'), 
    imagemin = require('gulp-imagemin'), 
    ngConstant = require('gulp-ng-constant-fork'), 
    eslint = require('gulp-eslint'), 
    es = require('event-stream'), 
    flatten = require('gulp-flatten'), 
    del = require('del'), 
    wiredep = require('wiredep').stream, 
    runSequence = require('run-sequence'), 
    browserSync = require('browser-sync'), 
    KarmaServer = require('karma').Server, 
    plumber = require('gulp-plumber'), 
    changed = require('gulp-changed'), 
    gulpIf = require('gulp-if'), 
    inject = require('gulp-inject'), 
    angularFilesort = require('gulp-angular-filesort'); 

var handleErrors = require('./gulp/handleErrors'), 
    serve = require('./gulp/serve'), 
    util = require('./gulp/utils'), 
    build = require('./gulp/build'); 


var config = require('./gulp/config'); 

gulp.task('clean', function() { 
    return del([config.dist], { dot: true }); 
}); 

gulp.task('copy', function() { 
    return es.merge( 
     gulp.src(config.bower + 'bootstrap/fonts/*.*') 
     .pipe(plumber({errorHandler: handleErrors})) 
     .pipe(changed(config.dist + 'content/fonts/')) 
     .pipe(rev()) 
     .pipe(gulp.dest(config.dist + 'content/fonts/')) 
     .pipe(rev.manifest(config.revManifest, { 
      base: config.dist, 
      merge: true 
     })) 
     .pipe(gulp.dest(config.dist)), 
     gulp.src(config.app + 'content/**/*.{woff,woff2,svg,ttf,eot,otf}') 
     .pipe(plumber({errorHandler: handleErrors})) 
     .pipe(changed(config.dist + 'content/fonts/')) 
     .pipe(flatten()) 
     .pipe(rev()) 
     .pipe(gulp.dest(config.dist + 'content/fonts/')) 
     .pipe(rev.manifest(config.revManifest, { 
      base: config.dist, 
      merge: true 
     })) 
     .pipe(gulp.dest(config.dist)), 
     gulp.src([config.app + 'robots.txt', config.app + 'favicon.ico', config.app + '.htaccess'], { dot: true }) 
     .pipe(plumber({errorHandler: handleErrors})) 
     .pipe(changed(config.dist)) 
     .pipe(gulp.dest(config.dist)) 
    ); 
}); 

gulp.task('images', function() { 
    return gulp.src(config.app + 'content/images/**') 
     .pipe(plumber({errorHandler: handleErrors})) 
     .pipe(changed(config.dist + 'content/images')) 
     .pipe(imagemin({optimizationLevel: 5, progressive: true, interlaced: true})) 
     .pipe(rev()) 
     .pipe(gulp.dest(config.dist + 'content/images')) 
     .pipe(rev.manifest(config.revManifest, { 
      base: config.dist, 
      merge: true 
     })) 
     .pipe(gulp.dest(config.dist)) 
     .pipe(browserSync.reload({stream: true})); 
}); 



gulp.task('styles', [], function() { 
    return gulp.src(config.app + 'content/css') 
     .pipe(browserSync.reload({stream: true})); 
}); 

gulp.task('inject', function() { 
    return gulp.src(config.app + 'index.html') 
     .pipe(inject(gulp.src(config.app + 'app/**/*.js').pipe(angularFilesort()), {relative: true})) 
     .pipe(gulp.dest(config.app)); 
}); 

gulp.task('wiredep', ['wiredep:test', 'wiredep:app']); 

gulp.task('wiredep:app', function() { 
    var stream = gulp.src(config.app + 'index.html') 
     .pipe(plumber({errorHandler: handleErrors})) 
     .pipe(wiredep({ 
      exclude: [ 
       /angular-i18n/, // localizations are loaded dynamically 
       'bower_components/bootstrap/dist/js/' // exclude bootstrap js files as we use ui-bootstrap 
      ] 
     })) 
     .pipe(gulp.dest(config.app)); 

    return stream; 
}); 

gulp.task('wiredep:test', function() { 
    return gulp.src(config.test + 'karma.conf.js') 
     .pipe(plumber({errorHandler: handleErrors})) 
     .pipe(wiredep({ 
      exclude: [ 
       /angular-i18n/, // localizations are loaded dynamically 
       /angular-scenario/, 
       'bower_components/bootstrap/dist/js/' // exclude Bootstrap js files as we use ui-bootstrap 
      ], 
      ignorePath: /\.\.\/\.\.\//, // remove ../../ from paths of injected JavaScript files 
      devDependencies: true, 
      fileTypes: { 
       js: { 
        block: /(([\s\t]*)\/\/\s*bower:*(\S*))(\n|\r|.)*?(\/\/\s*endbower)/gi, 
        detect: { 
         js: /'(.*\.js)'/gi 
        }, 
        replace: { 
         js: '\'src/{{filePath}}\',' 
        } 
       } 
      } 
     })) 
     .pipe(gulp.dest(config.test)); 
}); 

gulp.task('assets:prod', ['images', 'styles', 'html'], build); 

gulp.task('html', function() { 
    return gulp.src(config.app + 'app/**/*.html') 
     .pipe(htmlmin({collapseWhitespace: true})) 
     .pipe(templateCache({ 
      module: 'registroApp', 
      root: 'app/', 
      moduleSystem: 'IIFE' 
     })) 
     .pipe(gulp.dest(config.tmp)); 
}); 

gulp.task('ngconstant:dev', function() { 
    return ngConstant({ 
     dest: 'app.constants.js', 
     name: 'registroApp', 
     deps: false, 
     noFile: true, 
     interpolate: /\{%=(.+?)%\}/g, 
     wrap: 
      '(function() {\n' + 
      ' "use strict";\n' + 
      ' // DO NOT EDIT THIS FILE, EDIT THE GULP TASK NGCONSTANT SETTINGS INSTEAD WHICH GENERATES THIS FILE\n' + 
      ' {%= __ngModule %}\n' + 
      '})();\n', 
     constants: { 
      ENV: 'dev', 
      VERSION: util.parseVersion() 
     } 
    }) 
    .pipe(gulp.dest(config.app + 'app/')); 
}); 

gulp.task('ngconstant:prod', function() { 
    return ngConstant({ 
     dest: 'app.constants.js', 
     name: 'registroApp', 
     deps: false, 
     noFile: true, 
     interpolate: /\{%=(.+?)%\}/g, 
     wrap: 
      '(function() {\n' + 
      ' "use strict";\n' + 
      ' // DO NOT EDIT THIS FILE, EDIT THE GULP TASK NGCONSTANT SETTINGS INSTEAD WHICH GENERATES THIS FILE\n' + 
      ' {%= __ngModule %}\n' + 
      '})();\n', 
     constants: { 
      ENV: 'prod', 
      VERSION: util.parseVersion() 
     } 
    }) 
    .pipe(gulp.dest(config.app + 'app/')); 
}); 

// check app for eslint errors 
gulp.task('eslint', function() { 
    return gulp.src(['gulpfile.js', config.app + 'app/**/*.js']) 
     .pipe(plumber({errorHandler: handleErrors})) 
     .pipe(eslint()) 
     .pipe(eslint.format()) 
     .pipe(eslint.failOnError()); 
}); 

// check app for eslint errors anf fix some of them 
gulp.task('eslint:fix', function() { 
    return gulp.src(config.app + 'app/**/*.js') 
     .pipe(plumber({errorHandler: handleErrors})) 
     .pipe(eslint({ 
      fix: true 
     })) 
     .pipe(eslint.format()) 
     .pipe(gulpIf(util.isLintFixed, gulp.dest(config.app + 'app'))); 
}); 

gulp.task('test', ['wiredep:test', 'ngconstant:dev'], function (done) { 
    new KarmaServer({ 
     configFile: __dirname + '/' + config.test + 'karma.conf.js', 
     singleRun: true 
    }, done).start(); 
}); 


gulp.task('watch', function() { 
    gulp.watch('bower.json', ['install']); 
    gulp.watch(['gulpfile.js', 'pom.xml'], ['ngconstant:dev']); 
    gulp.watch(config.app + 'content/css/**/*.css', ['styles']); 
    gulp.watch(config.app + 'content/images/**', ['images']); 
    gulp.watch(config.app + 'app/**/*.js', ['inject']); 
    gulp.watch([config.app + '*.html', config.app + 'app/**', config.app + 'i18n/**']).on('change', browserSync.reload); 
}); 

gulp.task('install', function() { 
    runSequence(['wiredep', 'ngconstant:dev'], 'inject'); 
}); 

gulp.task('serve', function() { 
    runSequence('install', serve); 
}); 

gulp.task('build', ['clean'], function (cb) { 
    runSequence(['copy', 'wiredep:app', 'ngconstant:prod'], 'inject', 'assets:prod', cb); 
}); 

gulp.task('default', ['serve']); 

Build.js(對於一飲而盡任務)

var fs = require('fs'), 
    gulp = require('gulp'), 
    lazypipe = require('lazypipe'), 
    footer = require('gulp-footer'), 
    sourcemaps = require('gulp-sourcemaps'), 
    rev = require('gulp-rev'), 
    htmlmin = require('gulp-htmlmin'), 
    ngAnnotate = require('gulp-ng-annotate'), 
    prefix = require('gulp-autoprefixer'), 
    cssnano = require('gulp-cssnano'), 
    uglify = require('gulp-uglify'), 
    useref = require("gulp-useref"), 
    revReplace = require("gulp-rev-replace") 
    plumber = require('gulp-plumber'), 
    gulpIf = require('gulp-if'), 
    handleErrors = require('./handleErrors'); 

var config = require('./config'); 

var initTask = lazypipe() 
    .pipe(sourcemaps.init) 
    .pipe(footer, ';'); 
var jsTask = lazypipe() 
    .pipe(ngAnnotate) 
    .pipe(uglify); 
var cssTask = lazypipe() 
    .pipe(prefix) 
    .pipe(cssnano); 

module.exports = function() { 
    var templates = fs.readFileSync(config.tmp + '/templates.js'); 
    var manifest = gulp.src(config.revManifest); 

    return gulp.src([config.app + '**/*.html', 
     '!' + config.app + 'app/**/*.html', 
     '!' + config.app + 'swagger-ui/**/*', 
     '!' + config.bower + '**/*.html']) 
     .pipe(plumber({errorHandler: handleErrors})) 
     //init sourcemaps and prepend semicolon 
     .pipe(useref({}, initTask)) 
     //append html templates 
     .pipe(gulpIf('**/app.js', footer(templates))) 
     .pipe(gulpIf('*.js', jsTask())) 
     .pipe(gulpIf('*.css', cssTask())) 
     .pipe(gulpIf('*.html', htmlmin({collapseWhitespace: true}))) 
     .pipe(gulpIf('**/*.!(html)', rev())) 
     .pipe(revReplace({manifest})) 
     .pipe(sourcemaps.write('.')) 
     .pipe(gulp.dest(config.dist)); 
} 

Bower.json

{ 
    "version": "0.0.0", 
    "name": "registro", 
    "appPath": "src/main/webapp/", 
    "testPath": "src/test/javascript/spec", 
    "dependencies": { 
    "angular": "1.5.2", 
    "angular-aria": "1.5.2", 
    "angular-loading-bar": "0.9.0", 
    "angular-resource": "1.5.2", 
    "angular-sanitize": "1.5.2", 
    "angular-translate": "2.11.0", 
    "angular-translate-interpolation-messageformat": "2.11.0", 
    "angular-translate-loader-partial": "2.11.0", 
    "angular-translate-storage-cookie": "2.11.0", 
    "angular-ui-router": "0.2.18", 
    "angular-cache-buster": "0.4.3", 
    "angular-cookies": "1.5.2", 
    "angular-dynamic-locale": "0.1.30", 
    "angular-i18n": "1.5.2", 
    "angular-bootstrap": "1.2.5", 
    "bootstrap-ui-datetime-picker": "2.2.3", 
    "angular-material": "1.0.7", 
    "material-design-icons": "^2.2.3", 
    "ngstorage": "0.3.10", 
    "jquery": "2.2.2", 
    "json3": "3.3.2", 
    "modernizr": "3.3.1", 
    "ng-file-upload": "12.0.4", 
    "ngInfiniteScroll": "1.2.2", 
    "swagger-ui": "2.1.4", 
    "angular-material-data-table": "^0.10.8" 
    }, 
    "devDependencies": { 
    "angular-mocks": "1.5.2", 
    "angular-scenario": "1.5.2" 
    }, 
    "overrides": { 
    "angular": { 
     "dependencies": { 
     "jquery": "2.2.2" 
     } 
    }, 
    "material-design-icons": { 
     "main": [ 
     "iconfont/material-icons.css" 
     ] 
    }, 
    "messageformat": { 
     "main": [ 
     "messageformat.js", 
     "locale/es.js", 
     "locale/en.js" 
     ] 
    } 
    }, 
    "resolutions": { 
    "angular": "1.5.2", 
    "angular-cookies": "1.5.2", 
    "angular-material": "1.0.7", 
    "jquery": "2.2.2" 
    } 
} 

注:

  1. 我使用了JHipster(generator-jhipster 3.0.0)
  2. 在開發模式一切正常
  3. 這些* .css家屬是自動添加通過Gulp
+0

在dev模式下,material.html和md-data-table.css如何顯示在你的index.html中?你是手動插入它們還是自動通過gulp完成? –

+0

你可以發佈你的gulp文件嗎? thx – rick

+0

我添加了更多細節!謝謝! –

回答

0

這裏的問題是有些文件沒有初始註釋,所以cssnano沒有將它分開。