当我更改导入的* .scss文件时，jhipster中的Gulp任务不刷新main.css文件，仅当我更改main.scss时。 gulp中的监视任务向我显示了变化但没有任何反应。
Gulpfile.js
// Generated on 2016-03-14 using generator-jhipster 2.27.2
/* jshint camelcase: false */
'use strict';
var gulp = require('gulp'),
prefix = require('gulp-autoprefixer'),
cssnano = require('gulp-cssnano'),
usemin = require('gulp-usemin'),
uglify = require('gulp-uglify'),
sass = require('gulp-sass'),
htmlmin = require('gulp-htmlmin'),
imagemin = require('gulp-imagemin'),
ngAnnotate = require('gulp-ng-annotate'),
ngConstant = require('gulp-ng-constant-fork'),
jshint = require('gulp-jshint'),
rev = require('gulp-rev'),
protractor = require('gulp-protractor').protractor,
proxy = require('proxy-middleware'),
es = require('event-stream'),
flatten = require('gulp-flatten'),
del = require('del'),
url = require('url'),
wiredep = require('wiredep').stream,
runSequence = require('run-sequence'),
browserSync = require('browser-sync'),
sourcemaps = require('gulp-sourcemaps'),
KarmaServer = require('karma').Server,
plumber = require('gulp-plumber'),
changed = require('gulp-changed'),
cache = require('gulp-cached'),
handleErrors = require('./gulp/handleErrors'),
util = require('./gulp/utils');
var config = {
app: 'src/main/webapp/',
dist: 'src/main/webapp/dist/',
test: 'src/test/javascript/',
importPath: 'src/main/webapp/bower_components',
scss: 'src/main/scss/',
port: 9000,
apiPort: 8080,
liveReloadPort: 35729
};
gulp.task('clean', function () {
return del([config.dist]);
});
gulp.task('test', ['wiredep:test', 'ngconstant:dev'], function (done) {
//TODO LW UNCOMMENT WORKING ..
/* new KarmaServer({
configFile: __dirname + '/' + config.test + 'karma.conf.js',
singleRun: true
}, done).start();*/
});
gulp.task('protractor', function () {
return gulp.src([config.test + 'e2e/*.js'])
.pipe(plumber({errorHandler: handleErrors}))
.pipe(protractor({
configFile: config.test + 'protractor.conf.js'
}));
});
gulp.task('copy', function () {
return es.merge( // copy i18n folders only if translation is enabled
gulp.src(config.app + 'i18n/**')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(changed(config.dist + 'i18n/'))
.pipe(gulp.dest(config.dist + 'i18n/')),
gulp.src(config.app + 'bower_components/bootstrap/fonts/*.*')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(changed(config.dist + 'assets/fonts/'))
.pipe(gulp.dest(config.dist + 'assets/fonts/')),
gulp.src(config.app + 'assets/**/*.{woff,svg,ttf,eot}')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(changed(config.dist + 'assets/fonts/'))
.pipe(flatten())
.pipe(gulp.dest(config.dist + 'assets/fonts/')));
});
gulp.task('images', function () {
return gulp.src(config.app + 'assets/images/**')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(changed(config.dist + 'assets/images'))
.pipe(imagemin({optimizationLevel: 5}))
.pipe(gulp.dest(config.dist + 'assets/images'))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('sass', function () {
return gulp.src(config.scss + 'main.scss')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(changed(config.app + 'assets/styles', {extension: '.css'}))
.pipe(sass({includePaths: config.importPath}).on('error', sass.logError))
.pipe(gulp.dest(config.app + 'assets/styles'));
});
gulp.task('styles', ['sass'], function () {
return gulp.src(config.app + 'assest/styles')
.pipe(browserSync.reload({stream: true}));
});
gulp.task('install', function (done) {
runSequence('wiredep', 'ngconstant:dev', 'sass', done);
});
gulp.task('serve', function () {
runSequence('install', function () {
var baseUri = 'http://localhost:' + config.apiPort;
// Routes to proxy to the backend. Routes ending with a / will setup
// a redirect so that if accessed without a trailing slash, will
// redirect. This is required for some endpoints for proxy-middleware
// to correctly handle them.
var proxyRoutes = [
'/api',
'/health',
'/configprops',
'/env',
'/v2/api-docs',
'/swagger-ui',
'/configuration/security',
'/configuration/ui',
'/swagger-resources',
'/metrics',
'/websocket/tracker',
'/dump'
];
var requireTrailingSlash = proxyRoutes.filter(function (r) {
return util.endsWith(r, '/');
}).map(function (r) {
// Strip trailing slash so we can use the route to match requests
// with non trailing slash
return r.substr(0, r.length - 1);
});
var proxies = [
// Ensure trailing slash in routes that require it
function (req, res, next) {
requireTrailingSlash.forEach(function (route) {
if (url.parse(req.url).path === route) {
res.statusCode = 301;
res.setHeader('Location', route + '/');
res.end();
}
});
next();
}
]
.concat(
// Build a list of proxies for routes: [route1_proxy, route2_proxy, ...]
proxyRoutes.map(function (r) {
var options = url.parse(baseUri + r);
options.route = r;
options.preserveHost = true;
return proxy(options);
}));
browserSync({
open: false,
port: config.port,
reloadDelay: 1000,
server: {
baseDir: config.app,
middleware: proxies
}
});
gulp.start('watch');
});
});
gulp.task('watch', function () {
gulp.watch('bower.json', ['wiredep']);
gulp.watch(['gulpfile.js', 'build.gradle'], ['ngconstant:dev']);
gulp.watch(config.scss + '**/*.{scss,sass}', ['styles']);
gulp.watch(config.app + 'assets/images/**', ['images']);
gulp.watch(config.app + 'scripts/**/*.js', ['jshint']);
gulp.watch([config.app + '*.html', config.app + 'scripts/**', config.app + 'i18n/**']).on('change', browserSync.reload);
});
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/]
}))
.pipe(gulp.dest(config.app));
return es.merge(stream, gulp.src(config.scss + '*.{scss,sass}')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(wiredep({
exclude: [
/angular-i18n/, // localizations are loaded dynamically
'bower_components/bootstrap/' // Exclude Bootstrap LESS as we use bootstrap-sass
],
ignorePath: /\.\.\/webapp\/bower_components\// // remove ../webapp/bower_components/ from paths of injected sass files
}))
.pipe(gulp.dest(config.scss)));
});
gulp.task('wiredep:test', function () {
return gulp.src(config.test + 'karma.conf.js')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(wiredep({
exclude: [/angular-i18n/, /angular-scenario/],
ignorePath: /\.\.\/\.\.\//, // remove ../../ from paths of injected javascripts
devDependencies: true,
fileTypes: {
js: {
block: /(([\s\t]*)\/\/\s*bower:*(\S*))(\n|\r|.)*?(\/\/\s*endbower)/gi,
detect: {
js: /'(.*\.js)'/gi
},
replace: {
js: '\'{{filePath}}\','
}
}
}
}))
.pipe(gulp.dest(config.test));
});
gulp.task('build', function (cb) {
runSequence('clean', 'copy', 'wiredep:app', 'ngconstant:prod', 'usemin', cb);
});
gulp.task('usemin', ['images', 'styles'], function () {
return gulp.src([config.app + '**/*.html', '!' + config.app + '@(dist|bower_components)/**/*.html'])
.pipe(plumber({errorHandler: handleErrors}))
.pipe(usemin({
css: [
prefix,
'concat',
cssnano,
rev
],
html: [
htmlmin.bind(htmlmin, {collapseWhitespace: true})
],
js: [
sourcemaps.init,
ngAnnotate,
'concat',
uglify.bind(uglify, {mangle: false}),
rev,
sourcemaps.write.bind(sourcemaps.write, '.')
]
}))
.pipe(gulp.dest(config.dist));
});
gulp.task('ngconstant:dev', function () {
return ngConstant({
dest: 'app.constants.js',
name: 'adminApp',
deps: false,
noFile: true,
interpolate: /\{%=(.+?)%\}/g,
wrap: '/* jshint quotmark: false */\n"use strict";\n// DO NOT EDIT THIS FILE, EDIT THE GULP TASK NGCONSTANT SETTINGS INSTEAD WHICH GENERATES THIS FILE\n{%= __ngModule %}',
constants: {
BUILD_CONFIG: {
ENV: 'dev',
VERSION: util.parseVersion()
}
}
})
.pipe(gulp.dest(config.app + 'scripts/app/'));
});
gulp.task('ngconstant:test', function () {
return ngConstant({
dest: 'app.constants.js',
name: 'adminApp',
deps: false,
noFile: true,
interpolate: /\{%=(.+?)%\}/g,
wrap: '/* jshint quotmark: false */\n"use strict";\n// DO NOT EDIT THIS FILE, EDIT THE GULP TASK NGCONSTANT SETTINGS INSTEAD WHICH GENERATES THIS FILE\n{%= __ngModule %}',
constants: {
BUILD_CONFIG: {
ENV: 'prod',
VERSION: util.parseVersion()
}
}
})
.pipe(gulp.dest(config.app + 'scripts/app/'));
});
gulp.task('ngconstant:prod', function () {
return ngConstant({
dest: 'app.constants.js',
name: 'adminApp',
deps: false,
noFile: true,
interpolate: /\{%=(.+?)%\}/g,
wrap: '/* jshint quotmark: false */\n"use strict";\n// DO NOT EDIT THIS FILE, EDIT THE GULP TASK NGCONSTANT SETTINGS INSTEAD WHICH GENERATES THIS FILE\n{%= __ngModule %}',
constants: {
BUILD_CONFIG: {
ENV: 'prod',
VERSION: util.parseVersion()
}
}
})
.pipe(gulp.dest(config.app + 'scripts/app/'));
});
gulp.task('jshint', function () {
//Custom reporter (in task to have new instance each time)
var jsHintErrorReporter = require('./gulp/jsHintErrorReporter');
return gulp.src(['gulpfile.js', config.app + 'scripts/**/*.js'])
.pipe(plumber({errorHandler: handleErrors}))
.pipe(cache('jshint'))
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'))
.pipe(jsHintErrorReporter());
});
gulp.task('itest', ['protractor']);
gulp.task('default', ['serve']);
main.scss
.main {
max-height: 80%;
}
// include custom variables
@import "app/reset/bootstrap-variables.scss";
@import "app/common/media-queries.scss";
// include bootstrap default mixins
//@import "bootstrap/_mixins";
@import "bootstrap.scss";
// utils
@import "app/utils/utils-background.scss";
@import "app/utils/utils-variables.scss";
// reset (mixins and variables)
@import "app/reset/bootstrap-reset.scss";
// layout
@import "app/layout/layout.scss";
@import "app/layout/header.scss";
@import "app/layout/sidebar.scss";
// Common
@import "app/common/animate.scss";
@import "app/common/font.scss";
@import "app/common/loading-bar.scss";
@import "app/common/print.scss";
@import "app/common/settings.scss";
// Charts
@import "app/charts/charts.scss";
@import "app/charts/easypie.scss";
// forms
@import "app/forms/form-extras.scss";
@import "app/forms/form-imgcrop.scss";
@import "app/forms/form-input.scss";
@import "app/forms/form-switch.scss";
@import "app/forms/form-validation.scss";
@import "app/forms/form-wizard.scss";
@import "app/forms/uiselect.scss";
@import "app/forms/slider.scss";
// grid
@import "app/grid/grid-table.scss";
@import "app/grid/masonry-grid.scss";
@import "app/grid/row-extra.scss";
// icons
@import "app/icons/feather-icons.scss";
// maps
@import "app/maps/gmap.scss";
@import "app/maps/vector-map.scss";
// tables
@import "app/tables/table-ngtable.scss";
@import "app/tables/table-responsive.scss";
@import "app/tables/table-datatables.scss";
// ui
@import "app/ui/alerts.scss";
@import "app/ui/button-extra.scss";
@import "app/ui/button-switch.scss";
@import "app/ui/dropdown-extra.scss";
@import "app/ui/panels-extra.scss";
@import "app/ui/placeholder.scss";
@import "app/ui/points.scss";
@import "app/ui/progress-extra.scss";
// components
@import "app/components/datepicker.scss";
@import "app/components/nestable.scss";
@import "app/components/portlets.scss";
@import "app/components/ripple.scss";
@import "app/components/scrollable.scss";
@import "app/components/toaster.scss";
@import "app/components/typeahead.scss";
@import "app/components/layermorph.scss";
// extras
@import "app/extras/calendar.scss";
@import "app/extras/chat.scss";
@import "app/extras/mailbox.scss";
@import "app/extras/tasks.scss";
@import "app/extras/timeline-2.scss";
@import "app/extras/timeline.scss";
// utils
@import "app/utils/utils.scss";
.form-filter .form-control {
display: inline-block;
width: auto;
vertical-align: middle;
min-width: 154px;
}
.form-filter button {
display: inline-block;
width: auto;
vertical-align: bottom;
margin-bottom: 0px !important;
}
答案 0 :(得分：2)
我遇到了同样的问题，现在我发现问题在于sass任务中使用的“已更改”插件，只是评论：
.pipe(changed(config.app + 'assets/styles', {extension: '.css'}))
在我的jhipster版本中是.pipe(changed(config.cssDir, {extension: '.css'}))）
那应该解决问题。
答案 1 :(得分：0)
您需要观看所有scss文件
gulp.watch('your path to your scss files here',['sass']);