如何在Yeoman生成的AngularJS项目中用Grunt打包自定义assets目录资源

没问题，我来一步步教你修改Gruntfile.js，把assets/目录下的CSS、JS和图片都纳入Yeoman的构建流程里。Yeoman生成的AngularJS项目Grunt配置是模块化的，我们主要需要调整几个核心任务：

1. 配置copy任务：复制静态资源到dist目录 #

Grunt的copy任务负责把未被压缩合并的静态资源（比如字体、特定格式图片）复制到最终的dist目录。找到Gruntfile里的copy配置块，修改dist子任务的src数组，加入assets目录的相关路径：

copy: {
  dist: {
    files: [{
      expand: true,
      dot: true,
      cwd: '<%= yeoman.app %>',
      dest: '<%= yeoman.dist %>',
      src: [
        '*.{ico,png,txt}',
        '*.html',
        'views/{,*/}*.html',
        // 加入assets下的图片和字体
        'assets/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
        'assets/fonts/{,*/}*.*'
      ]
    }, {
      expand: true,
      cwd: '.tmp/images',
      dest: '<%= yeoman.dist %>/assets/images',
      src: ['generated/*']
    }]
  },
  // 保留其他copy子任务（如styles、fonts）的原有配置
}

2. 调整useminPrepare和usemin任务：处理资源合并压缩 #

usemin是Yeoman构建的核心，它会识别HTML里的注释标记，自动合并压缩资源。

第一步：在HTML中添加usemin标记 #

先在你的HTML文件（比如index.html）里，给assets下的CSS和JS加上对应的注释块，告诉Grunt要合并这些文件：

<!-- build:css assets/css/main.css -->
<link rel="stylesheet" href="assets/css/style1.css">
<link rel="stylesheet" href="assets/css/style2.css">
<!-- endbuild -->

<!-- build:js assets/js/main.js -->
<script src="assets/js/script1.js"></script>
<script src="assets/js/script2.js"></script>
<!-- endbuild -->

第二步：修改Gruntfile的usemin配置 #

找到usemin任务配置，确保它能正确识别dist目录下的assets资源路径：

usemin: {
  html: ['<%= yeoman.dist %>/{,*/}*.html', '<%= yeoman.dist %>/views/{,*/}*.html'],
  css: ['<%= yeoman.dist %>/assets/css/{,*/}*.css'], // 指向dist下的assets/css文件
  options: {
    assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/assets/images'] // 让usemin能定位图片资源
  }
}

useminPrepare任务一般不需要额外修改，只要HTML里的路径正确，它会自动扫描到assets下的资源并生成临时任务。

3. 配置cssmin任务：压缩assets下的CSS #

找到cssmin的dist子任务，把assets下的CSS文件加入压缩源：

cssmin: {
  dist: {
    files: {
      '<%= yeoman.dist %>/assets/css/main.css': [
        '.tmp/styles/{,*/}*.css',
        '<%= yeoman.app %>/assets/css/{,*/}*.css' // 加入assets/css的文件
      ]
    }
  }
}

4. 配置uglify任务：压缩assets下的JS #

修改uglify的dist子任务，指定要压缩的assets/js文件：

uglify: {
  dist: {
    files: {
      '<%= yeoman.dist %>/assets/js/main.js': [
        '<%= yeoman.app %>/assets/js/{,*/}*.js' // 指向assets/js的所有JS文件
      ]
    }
  }
}

5. 配置imagemin任务：压缩assets下的图片 #

调整imagemin的dist子任务，把源目录改成assets/images，输出到dist对应的目录：

imagemin: {
  dist: {
    files: [{
      expand: true,
      cwd: '<%= yeoman.app %>/assets/images', // 源图片目录
      src: '{,*/}*.{png,jpg,jpeg,gif}',
      dest: '<%= yeoman.dist %>/assets/images' // 压缩后输出目录
    }]
  }
}

最后测试 #

修改完所有配置后，运行grunt build命令，就能看到dist/assets目录下已经包含了处理好的CSS、JS和压缩后的图片了。

内容的提问来源于stack exchange，提问作者Jesse Barnum