Grunt配置及使用

1、node环境安装

2、grunt安装

package.json文件

{
  "name": "payment",
  "version": "0.0.1",
  "author": "zhangxu",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-connect": "^1.0.2",
    "grunt-contrib-copy": "^1.0.0",
    "grunt-contrib-htmlmin": "^2.4.0",
    "grunt-contrib-imagemin": "^2.0.1",
    "grunt-contrib-jshint": "^1.1.0",
    "grunt-contrib-less": "^1.4.1",
    "grunt-contrib-sass": "^1.0.0",
    "grunt-contrib-uglify": "^3.3.0",
    "grunt-contrib-watch": "^1.0.0"
  },
  "dependencies": {
    "express": "^4.16.2"
  }
}

Gruntfile.js文件

module.exports = function (grunt) {

    grunt.initConfig({
        //初始化一个配置对象
        pkg: grunt.file.readJSON('package.json'),
        //采用imagemin压缩图片
        imagemin: {
            images: {
                expand: true,
                src: 'images/*.{jpg,png}',
                dest: 'dist/'
            },
            libWeuiImages: {
                expand: true,
                src: 'lib/weui/images/*.{jpg,png}',
                dest: 'dist/'
            }
        },
        //js语法检查
        jshint: {
            options: {
                reporterOutput: ''
            },
            all: ['js/*.js']
        },
        // js合并
        concat: {
            dist: {
                src: ['./src/plugin.js', './src/plugin2.js'],
                dest: './global.js',
            }
        },
        //采用UglifyJS压缩js
        uglify: {
            js: {
                expand: true,
                cwd: 'js',
                src: '*.js',
                dest: 'dist/js/'
            },
            libCryptoJs: {
                expand: true,
                cwd: 'lib/crypto-js',
                src: '*.js',
                dest: 'dist/lib/crypto-js/'
            },
            libJquery: {
                expand: true,
                cwd: 'lib/jquery',
                src: '*.js',
                dest: 'dist/lib/jquery/'
            },
            libWechat: {
                expand: true,
                cwd: 'lib/wechat',
                src: '*.js',
                dest: 'dist/lib/wechat/'
            },
            libWeui: {
                expand: true,
                cwd: 'lib/weui',
                src: '*.js',
                dest: 'dist/lib/weui/'
            }
        },

        //采用less压缩css
        less: {
            options: {
                compress: true,
                cleancss: true,     // 压缩css文件
                yuicompress: false
            },
            css: {
                expand: true,
                cwd: 'css',
                src: '*.css',
                dest: 'dist/css'
            },
            libWeui: {
                expand: true,
                cwd: 'lib/weui',
                src: '*.css',
                dest: 'dist/lib/weui'
            }
        },
        
        //压缩html
        htmlmin: {
            payment: {
                options: {
                    removeComments: true,
                    collapseWhitespace: true
                },
                files: [{
                    expand: true,
                    cwd: '',
                    src: ['wxjump.html', 'html/[a-z]{1,}*.html', 'html/contract/[a-z]{1,}*.html'],
                    dest: 'dist/',
                    extDot: 'first'
                }]
            }
        },
        
        //复制文件
        copy: {
            html: {
                src: 'home.html',
                dest: 'dist/'
            },
            html2: {
                src: 'html/*.html',
                dest: 'dist/'
            },
            htmlContract: {
                src: 'html/contract/*.html',
                dest: 'dist/'
            },
            html3: {
                src: 'wxjump.html',
                dest: 'dist/'
            },
        },
        
        //监视文件变化
        watch: {
            livereload: {
                options: {
                    livereload: '<%= connect.options.livereload %>'
                },
                files: [
                    'css/*.css',
                    'html/*.html',
                    'html/contract/*.html',
                    'js/*.js'
                ]
            }
        },
        //测试服务地址
        connect: {
            options: {
                port: 9000,
                open: true,
                livereload: 35729,
                // Change this to '0.0.0.0' to access the server from outside
                hostname: '192.168.16.120'
            },
            server: {
                options: {
                    port: 9001,
                    base: './'
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-contrib-imagemin');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-connect');
    grunt.loadNpmTasks('grunt-contrib-htmlmin');

    grunt.registerTask('default', []);
    //全项目:上生产用
    grunt.registerTask('payment', ['imagemin', 'jshint', 'uglify', 'less', 'htmlmin']);
    //图片文件
    grunt.registerTask('1', ['imagemin']);
    //脚本文件
    grunt.registerTask('2', ['jshint', 'uglify']);
    //样式文件
    grunt.registerTask('3', ['less']);
    //页面文件
    grunt.registerTask('4', ['htmlmin']);
    //开发
    grunt.registerTask('development', ['connect', 'watch']);
    //js脚本检查
    grunt.registerTask('jscheck', ['jshint']);
};

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏散尽浮华

apache工作模式梳理

apache目前主要有两种模式:prefork模式和worker模式: 1)prefork模式(默认模式) prefork是Unix平台上的默认(缺省)MPM,...

2508
来自专栏PHP在线

apache2.4.x三种MPM介绍

Apache 2.X 支持插入式并行处理模块,称为多路处理模块(MPM)。在编译apache时必须选择也只能选择一个MPM,对类UNIX系统,有几个不同的M...

2939
来自专栏王小雷

pgAdmin4 ubuntu python 安装

ubuntu安装pgAdmin4,通过python的pip 安装 pgAdmin4.(首更时间20161205) 新版本的pgAdmin4目前支持mac/w...

3697
来自专栏Java开发

Linux 查看网卡UUID

3802
来自专栏Java技术分享

MongoDB基础语句

闺蜜苏苏工作是前端开发,她竟然被要求用到MongoDB数据库,所以先让她安装好先,再来测试下面语句~ MongoDB数据库安装地址:http://jingya...

2208
来自专栏Java编程技术

Dubbo剖析-服务消费方Invoker到客户端接口的转换

前面dubbo整体架构分析里面我们讲解了服务消费者消费一个服务的详细过程是,首先 调用 Protocol 的 refer 方法生成 Invoker 实例,接下来...

1073
来自专栏Java编程技术

Dubbo剖析-服务提供方Invoker到Exporter的转换

前面dubbo整体架构分析里面我们讲解了服务提供者暴露一个服务的详细过程是,首先具体服务的实现类转换为了Invoker对象,然后Invoker在转换为Expor...

1263
来自专栏刘远飞的专栏

Apache 性能配置优化

最近在进行apache性能优化设置。在修改apache配置文件之前需要备份原有的配置文件夹conf,这是网站架设的好习惯。本文讲述的apache配置调优均是在r...

2.7K0
来自专栏IT笔记

Ehcache中timeToLiveSeconds和timeToIdleSeconds的区别

项目中配置如下: <?xml version="1.0" encoding="UTF-8"?> <ehcache updateCheck="false" nam...

3174
来自专栏冷冷

【ehcache】 timeToLiveSeconds 和 timeToLiveSeconds 的区别

ehcache.xml <?xml version="1.0" encoding="UTF-8"?> <ehcache updateCheck="false" ...

1967

扫码关注云+社区

领取腾讯云代金券