Usemin fails to update CSS file & JS file image paths correctly.
Opened this issue · 1 comments
zhongDZ commented
module.exports = function (grunt) {
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
banner: '',
game_name : 'diaoyu',//项目名字
//清除目录
clean: {
all: ['dist/view/<%=game_name%>/**', 'dist/*.*'],
image: 'dist/static/<%=game_name%>/res',
css: 'dist/static/<%=game_name%>/css',
js: 'dist/static/<%=game_name%>/js',
html: 'dist/view/<%=game_name%>/*'
},
copy: {
src: {
files: [
{expand: true, cwd: 'test1/view/<%=game_name%>', src: ['*.html'], dest: 'dist/view/<%=game_name%>'},
{expand: true, cwd: 'test1/lib/js', src: ['**/*.js'], dest: 'dist/lib/js'},
{expand: true, cwd: 'test1/static/common', src: ['**/*.{css,js,mp3}'], dest: 'dist/static/common'}
]
},
image: {
files: [
{expand: true, cwd: 'test1/static/<%=game_name%>', src: ['res/**/*.{png,jpg,jpeg,gif,mp3}'], dest: 'dist/static/<%=game_name%>'}
]
}
},
// 文件合并
concat: {
options: {
separator: '',//分隔符号
stripBanners: true,//允许添加头部
//在头部添加 js文件名和时间的注释
banner: '/*! <%=pkg.name%>-<%=pkg.version%>.js <%=grunt.template.today("yyyy-mm-dd") %> */\n'
},
js: {
src: [
"test1/static/<%=game_name%>/js/*.js"
],
// dest: "dist/html/js/game.min.js"
dest: "dist/static/<%=game_name%>/js/game.min.js"
},
css:{
src: [
"test1/static/<%=game_name%>/css/*.css", "test1/static/common/css/*.css", "test1/lib/css/*.css"
],
dest: "dist/static/<%=game_name%>/css/game.min.css"
}
},
//压缩JS
uglify: {
prod: {
files: {
'dist/static/<%=game_name%>/js/game.min.js': ['test1/static/<%=game_name%>/js/*.js', '!test1/static/<%=game_name%>/js/*.min.js']
}
}
},
//这种方法需要将上一步合并的操作生成文件改成libs.min.js
// uglify: {
// build: {
// src: 'dest/libs.min.js',
// dest: 'dest/game.min.js'
// }
// },
//压缩CSS
cssmin: {
prod: {
options: {
report: 'gzip'
},
files: [
{
expand: true,
cwd: 'dist/static/<%=game_name%>',
src: ['css/*.css'],
dest: 'dist/static/<%=game_name%>'
}
]
}
},
//压缩图片
imagemin: {
prod: {
options: {
optimizationLevel: 7,
pngquant: true
},
files: [
{expand: true, cwd: 'dist/static/<%=game_name%>', src: ['res/**/*.{png,jpg,jpeg,gif,webp,svg}'], dest: 'dist/static/<%=game_name%>'}
]
}
},
rev: {
options: {
algorithm: 'sha1',
length: 8
},
assets: {
files: [{
src: [
'dist/static/<%=game_name%>/**/*.{css,jpg,jpeg,gif,png,js}'
]
}]
}
},
useminPrepare: {
html: ['test1/view/<%=game_name%>/*.html'],
options: {
// 测试发现这里指定的dest，是usemin引入资源的相对路径的开始
// 在usemin中设置assetsDirs，不是指定的相对路径
// List of directories where we should start to look for revved version of the assets referenced in the currently looked at file
dest: 'dist/static/diaoyu' // string type
}
},
// 处理html中css、js 引入合并问题
usemin: {
options: {
assetsDirs: [
'dist/static/diaoyu/res/**/*.{png,gif,jpg,jpeg}',
'dist/static/diaoyu/css/*.css',
'dist/static/diaoyu/js/*.js'
],
patterns: {
js: [[/([\w-]+\.png)/, 'replace res in js']]
}
},
js: 'dist/static/diaoyu/js/**/*.js',
css: 'dist/static/diaoyu/css/**/*.css',
html: 'dist/view/diaoyu/**/*.html',
},
//压缩HTML
htmlmin: {
options: {
removeComments: true,
removeCommentsFromCDATA: true,
collapseWhitespace: true,
collapseBooleanAttributes: true,
removeAttributeQuotes: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeOptionalTags: true
},
html: {
files: [
{expand: true, cwd: 'dist/view/<%=game_name%>', src: ['*.html'], dest: 'dist/view/<%=game_name%>'}
]
}
}
});
grunt.registerTask('prod', [
'copy', //复制文件
'concat', //合并文件
// 'imagemin', //图片压缩
// 'cssmin', //CSS压缩
'uglify', //JS压缩
'rev', //重置文件名
'usemin:html', //HTML处理
'usemin:css', //HTML处理
'usemin:js', //HTML处理
// 'htmlmin', //HTML压缩
]);
grunt.registerTask('build', ['clean', 'prod']);
};
iostate commented
I am also having this issue. Gulp does not properly search the paths when running the gulp task.
The error "bootstrap.min.css" is not found is invalid, as the file is clearly in the directory when the gulp task is ran.
Gulp configuration file:
var gulp = require('gulp')
, minifycss = require('gulp-minify-css')
, jshint = require('gulp-jshint')
, stylish = require('jshint-stylish')
, uglify = require('gulp-uglify')
, usemin = require('gulp-usemin')
, imagemin = require('gulp-imagemin')
, rename = require('gulp-rename')
, concat = require('gulp-concat')
, notify = require('gulp-notify')
, cache = require('gulp-cache')
, changed = require('gulp-changed')
, rev = require('gulp-rev')
, browserSync = require('browser-sync')
, del = require('del');
var ngannotate = require('gulp-ng-annotate');
gulp.task('jshint', function () {
return gulp.src('app/scripts/**/*.js').pipe(jshint()).pipe(jshint.reporter(stylish));
});
// Clean
gulp.task('clean', function () {
return del(['dist']);
});
// Default task
gulp.task('default', ['clean'], function () {
gulp.start('usemin', 'imagemin', 'copyfonts');
});
gulp.task('usemin',['jshint'], function () {
return gulp.src('./app/**/*.html')
.pipe(usemin({
css:[minifycss(),rev()],
js: [ngannotate(),uglify(),rev()]
}))
.pipe(gulp.dest('dist/'));
});
// Images
gulp.task('imagemin', function () {
return del(['dist/images']), gulp.src('app/images/**/*').pipe(cache(imagemin({
optimizationLevel: 3
, progressive: true
, interlaced: true
}))).pipe(gulp.dest('dist/images')).pipe(notify({
message: 'Images task complete'
}));
});
gulp.task('copyfonts', ['clean'], function () {
gulp.src('./bower_components/font-awesome/fonts/**/*.{ttf,woff,eof,svg}*').pipe(gulp.dest('./dist/fonts'));
gulp.src('./bower_components/bootstrap/dist/fonts/**/*.{ttf,woff,eof,svg}*').pipe(gulp.dest('./dist/fonts'));
});
// Watch
gulp.task('watch', ['browser-sync'], function () {
// Watch .js files
gulp.watch('{app/scripts/**/*.js,app/styles/**/*.css,app/**/*.html}', ['usemin']);
// Watch image files
gulp.watch('app/images/**/*', ['imagemin']);
});
gulp.task('browser-sync', ['default'], function () {
var files = [
'app/**/*.html'
, 'app/styles/**/*.css'
, 'app/images/**/*.png'
, 'app/scripts/**/*.js'
, 'dist/**/*'
];
browserSync.init(files, {
server: {
baseDir: "dist",
index: "index.html"
}
});
// Watch any files in dist/, reload on change
gulp.watch(['dist/**']).on('change', browserSync.reload);
});
Error when running the gulp task in command line:
C:\Users\qmtru\Desktop\conFusion>gulp
[18:29:20] Using gulpfile ~\Desktop\conFusion\gulpfile.js
[18:29:20] Starting 'clean'...
[18:29:20] Finished 'clean' after 25 ms
[18:29:20] Starting 'default'...
[18:29:20] Starting 'jshint'...
[18:29:20] Starting 'imagemin'...
[18:29:20] Starting 'clean'...
[18:29:20] Finished 'default' after 24 ms
[18:29:20] Finished 'clean' after 6.84 ms
[18:29:20] Starting 'copyfonts'...
[18:29:20] Finished 'copyfonts' after 2.09 ms
app\scripts\controllers.js
line 57 col 75 Expected '===' and instead saw '=='.
‼ 1 warning
[18:29:20] Finished 'jshint' after 253 ms
[18:29:20] Starting 'usemin'...
[18:29:21] gulp-notify: [Gulp notification] Images task complete
events.js:160
throw er; // Unhandled 'error' event
^
Error: Path C:\Users\qmtru\Desktop\conFusion\app\bower_components\bootstrap\dist\css\bootstrap.min.css not found!