Grunt打包前端代码教程

最新推荐文章于 2023-10-24 17:03:15 发布

Alan_阿兰

最新推荐文章于 2023-10-24 17:03:15 发布

阅读量584

点赞数

CC 4.0 BY-SA版权

分类专栏：前端自动化管理

本文链接：https://blog.youkuaiyun.com/sixteen_cicle/article/details/72178867

前端自动化管理专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用Grunt进行自动化构建流程，包括安装Node.js、搭建Grunt项目、配置相关插件以及具体实例操作，如合并和压缩JavaScript文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

详细教程

http://blog.youkuaiyun.com/wangfupeng1988/article/details/46418203/

过程：

1.安装node.js

2.兴建 Grunt项目
包含：
F:\App\grunt_test

package.json：

{
  "name": "grunt_test",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-clean": "latest",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-copy": "latest",
    "grunt-contrib-cssmin": "^2.2.0",
    "grunt-contrib-htmlmin": "latest",
    "grunt-contrib-jshint": "^1.1.0",
    "grunt-contrib-requirejs": "latest",
    "grunt-contrib-sass": "*",
    "grunt-contrib-uglify": "^3.0.0",
    "grunt-contrib-watch": "*",
    "grunt-cssc": "*",
    "grunt-htmlhint": "*",
    "grunt-usemin": "latest",
    "matchdep": "*"
  },
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "huzhao",
  "license": "ISC"
}

Gruntfile.js：

module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
      options: {
        separator: ';'
      },
      dist: {
        src: ['src/**/*.js'],
        dest: 'dist/<%= pkg.name %>.js'
      }
    },
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
      },
      dist: {
        files: {
          'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.registerTask('default', ['concat', 'uglify']);

};

3.安装 Grunt及相关插件

cmd命令行

npm install grunt -g  //安装grunt,-g全局变量
npm install grunt-cli -g //安装grunt命令行
npm install grunt --save-dev  //安装grunt,--save-dev保存到安装目录
npm install grunt-cli --save-dev //安装grunt命令行
npm install grunt-contrib-jshint --save-dev //js语法检测插件
npm install grunt-contrib-concat --save-dev //js合并插件
npm install grunt-contrib-uglify --save-dev //js压缩插件
npm install grunt-contrib-cssmin --save-dev //CSS压缩插件

4.实例学习：打包zepto

http://www.cnblogs.com/yexiaochai/p/3603389.html

1.在项目里新建src文件夹

放入要压缩的目标文件

2.cmd 执行 grunt命令

3.结果图

总结：

1.压缩文件路劲设置

Gruntfile.js里

2.压缩文件命名

package.json里

3.grunt 相关插件配置

package.json里

完整项目

module.exports = function(grunt) {
  // 项目配置
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    clean: { //清除目标文件下文件
      payment: {
        src: "payment/build"
      }
    },
    copy: {
      payment: {
        expand: true,
        cwd: 'payment/src',//源文件路径
        src: '**',//源文件目录下的所有文件
        dest: 'payment/build/',//目标文件路径，把源文件下的文件复制到该目录下
        flatten: false,//用来指定是否保持文件目录结构
        filter: 'isFile',
      },
    },
    uglify: {//压缩js文件
      payment: {
        files: [{
          expand: true,
          cwd: 'payment/src/js', //js源文件目录
          src: '*.js', //所有js文件
          dest: 'payment/build/js' //输出到此目录下
        }]
      }
    },
    // sass: {
    //   payment: {
    //     files: [{
    //       expand: true,
    //       cwd: 'src',
    //       src: ['*.scss'],
    //       dest: 'payment/build',
    //       ext: '.css'
    //     }]
    //   }
    // },
    cssmin: { //压缩css
      payment: {
        "files": {
          'payment/build/css/main.css': ['payment/src/css/*.css']//将数组里面的css文件压缩成一个目标文件
        }
      }
    },
    htmlmin: { //压缩html
      payment: {
        options: { // Target options
          removeComments: true,
          collapseWhitespace: true
        },
        files: [{
          expand: true, // Enable dynamic expansion.
          cwd: 'payment/src', // Src matches are relative to this path.
          src: ['*.html'], // Actual pattern(s) to match.
          dest: 'payment/build/', // Destination path prefix.
          ext: '.html', // Dest filepaths will have this extension.
          extDot: 'first' // Extensions in filenames begin after the first dot
        }]
      }
    }
  });
  // 加载提供"uglify"任务的插件
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-htmlmin');
  // grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');
  // 默认任务
  grunt.registerTask('payment', ['clean:payment','copy:payment', 'uglify:payment', 'cssmin:payment', 'htmlmin:payment']);
}