grunt 实例构建（三）

安装 Grunt-cli 全局安装

npm install -g grunt-cli

 

生成 package.json 文件

在指定文件目录下执行： 

npm init

之前我们把Grunt安装到了全局目录下，现在需要引入到当前项目路径，与此同时，所需要的插件可能有这些：

方法1

npm install grunt--save-dev
npm install grunt-contrib-jshint--save-dev

 

这个时候package.json文件夹里多出了一些代码。

 "devDependencies": {
    "grunt": "0.4.1"
  },

 

 

方法2

手动添加模块插件版本

"devDependencies": {
　　"grunt": "~0.4.1",
　　"grunt-contrib-cssmin": "~0.7.0"
　}

npm install，会发现文件夹里多了node_modules文件夹，里面存放的就是我们需要的插件。

 

Gruntfile.js文件

与package.json是统计目录下。 

Gruntfile.js配置css、image、javascript、html压缩


module.exports = function (grunt) {

  require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

  grunt.initConfig({

    //清除目录
    clean: {
      all: ['dist/html/**', 'dist/*.*'],
      image: 'dist/html/images',
      css: 'dist/html/css',
      html: 'dist/html/**/*'
    },

    copy: {
      src: {
        files: [
          {expand: true, cwd: 'src', src: ['*.html'], dest: 'dist/html'}
        ]
      },
      image: {
        files: [
          {expand: true, cwd: 'src', src: ['images/*.{png,jpg,jpeg,gif}'], dest: 'dist/html'}
        ]
      }
    },

    // 文件合并
    concat: {
      options: {
        separator: ';',
        stripBanners: true
      },
      js: {
        src: [
          "src/js/*.js"
        ],
        dest: "dist/html/js/app.js"
      },
      css:{
        src: [
          "src/css/*.css"
        ],
        dest: "dist/html/css/main.css"
      }
    },

    //压缩JS
    uglify: {
      prod: {
        options: {
          mangle: {
            except: ['require', 'exports', 'module', 'window']
          },
          compress: {
            global_defs: {
              PROD: true
            },
            dead_code: true,
            pure_funcs: [
              "console.log",
              "console.info"
            ]
          }
        },

        files: [{
            expand: true,
            cwd: 'dist/html',
            src: ['js/*.js', '!js/*.min.js'],
            dest: 'dist/html'
        }]
      }
    },

    //压缩CSS
    cssmin: {
      prod: {
        options: {
          report: 'gzip'
        },
        files: [
          {
            expand: true,
            cwd: 'dist/html',
            src: ['css/*.css'],
            dest: 'dist/html'
          }
        ]
      }
    },

    //压缩图片
    imagemin: {
      prod: {
        options: {
          optimizationLevel: 7,
          pngquant: true
        },
        files: [
          {expand: true, cwd: 'dist/html', src: ['images/*.{png,jpg,jpeg,gif,webp,svg}'], dest: 'dist/html'}
        ]
      }
    },

    // 处理html中css、js 引入合并问题
    usemin: {
      html: 'dist/html/*.html'
    },

    //压缩HTML
    htmlmin: {
      options: {
        removeComments: true,
        removeCommentsFromCDATA: true,
        collapseWhitespace: true,
        collapseBooleanAttributes: true,
        removeAttributeQuotes: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeOptionalTags: true,
　　　　　　//removeComments: true, // 去除注释信息
　　　　　　//collapseWhitespace: true, // 去除空白字符
　　　　　　//removeEmptyAttributes: true, // 去除标签的空属性
　　　　　　//removeCommentsFromCDATA: true, // 去除 CDATA 的注释信息
　　　　　　//removeRedundantAttributes: true, // 去除标签的冗余属性


      },
      html: {
        files: [
          {expand: true, cwd: 'dist/html', src: ['*.html'], dest: 'dist/html'}
        ]
      }
    }

  });


  grunt.registerTask('prod', [
    'copy',                 //复制文件
    'concat',               //合并文件
    'imagemin',             //图片压缩
    'cssmin',               //CSS压缩
    'uglify',               //JS压缩
    'usemin',               //HTML处理
    'htmlmin'               //HTML压缩
  ]);

  grunt.registerTask('publish', ['clean', 'prod']);
};

 

 
 

posted on 2018-11-03 23:34  Mc525  阅读(240)  评论(0)    收藏  举报

导航