Skip to content
This repository has been archived by the owner on Apr 20, 2018. It is now read-only.

Usemin fails to update CSS file & JS file image paths correctly. #629

Open
zhongDZ opened this issue Dec 7, 2016 · 1 comment
Open

Usemin fails to update CSS file & JS file image paths correctly. #629

zhongDZ opened this issue Dec 7, 2016 · 1 comment

Comments

@zhongDZ
Copy link

zhongDZ commented Dec 7, 2016

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
Copy link

iostate commented Mar 16, 2017

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!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants