zoukankan      html  css  js  c++  java
  • grunt的用法

    以下是压缩js,css和css合并,html,img,js语法检查

      要想实现这些,需要在命令行里下载:

        js: npm install grunt-contrib-uglify --save-dev

        css: npm install grunt-contrib-cssmin --save-dev

           npm install grunt-contrib-concat --save-dev

        html: npm install grunt-contrib-htmlmin --save-dev

        js语法检查: npm install grunt-contrib-jshint --save-dev

    module.exports = function(grunt) {

      //任务配置,所有插件的配置信息
      grunt.initConfig({
        // 压缩js
        uglify:{
          yasuo:{
            options:{
              mangle:false //压缩代码,参数不改变
            },
            expand:true,
            src:"src/*.js",
            dest:"dest",
            rename:function (dest,src) {
              return dest+"/"+src.replace(".js",".min.js")
            }
          }
       },
       // 压缩图片
       imagemin: {
        dist: {
          options: {
            optimizationLevel: 3 //定义 PNG 图片优化水平
          },
        files: [{
          expand: true,
          cwd: 'img/',
          src: ['*.{png,jpg,jpeg}'], // 优化 img 目录下所有 png/jpg/jpeg 图片
          dest: 'image/' // 优化后的图片保存位置,覆盖旧图片,
         }]
        }
      },
      // 合并压缩css
      concat : {

        css : {

          src: ['src/*.css'],

          dest:'dest/index.css'

        }

       },
      cssmin: {

        css: {

          src:'dest/index.css',

          dest:'dest/index-min.css'

        }

      },
      // 压缩html
      htmlmin: {
        dist: {
          options: {
            removeComments: true,
            collapseWhitespace: true
           },
        files: {
          'dest/index.min.html': 'src/index.html'
          }
        },
      dev: {
        files: {
          'dest/index.min.html': 'src/index.html'
        }
       }
      },
      // 检查js语法
      jshint: {
        all: [
          'app/*.js'
        ],
        options: {
          browser: true,

          devel: true
        }
      }
    });

        //告诉grunt我们将使用插件
        grunt.loadNpmTasks('grunt-contrib-uglify');
        grunt.loadNpmTasks('grunt-contrib-imagemin');
        grunt.loadNpmTasks('grunt-contrib-htmlmin');
        grunt.loadNpmTasks('grunt-contrib-concat');
        grunt.loadNpmTasks('grunt-contrib-cssmin');
        grunt.loadNpmTasks('grunt-contrib-jshint');

        //告诉grunt当我们在终端中输入grunt时需要做什么(注意先后顺序)
        grunt.registerTask('default', ['concat','cssmin','imagemin','uglify','htmlmin','jshint']);
    };

  • 相关阅读:
    Roslyn 语法树中的各种语法节点及每个节点的含义
    WPF 使用 WindowChrome,在自定义窗口标题栏的同时最大程度保留原生窗口样式(类似 UWP/Chrome)
    在制作跨平台的 NuGet 工具包时,如何将工具(exe/dll)的所有依赖一并放入包中
    如何在 .NET 库的代码中判断当前程序运行在 Debug 下还是 Release 下
    像黑客一样!Chrome 完全键盘操作指南(原生快捷键 + Vimium 插件)
    .NET 使用 XPath 来读写 XML 文件
    XML 的 XPath 语法
    WPF 中使用附加属性,将任意 UI 元素或控件裁剪成圆形(椭圆)
    Windows 10 四月更新,文件夹名称也能区分大小写?
    C#/.NET 中推荐的 Dispose 模式的实现
  • 原文地址:https://www.cnblogs.com/liangxiaoli/p/6986488.html
Copyright © 2011-2022 走看看