1
由供應商檔案我有這樣的主CSS:JHipster - 一些CSS文件並沒有出現在被咕嘟咕嘟
和我的供應商是這樣的:
爲什麼當我運行生產模式時,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"
}
}
注:
- 我使用了JHipster(generator-jhipster 3.0.0)。
- 在開發模式一切正常。
- 這些* .css家屬是自動添加通過Gulp。
在dev模式下,material.html和md-data-table.css如何顯示在你的index.html中?你是手動插入它們還是自動通過gulp完成? –
你可以發佈你的gulp文件嗎? thx – rick
我添加了更多細節!謝謝! –