两步搞定grunt学习之旅

闲来无聊百度、谷歌发现一好东西,原来需要手动操作的现在就用grunt搞定了,O(∩_∩)O哈哈~

最重要的两个文件:package.jsonGruntfile.js

===============================开始动手============================================

配置文件package.json:

{
  "name": "demo",
  "file": "zepto",
  "version": "0.1.0",
  "description": "demo",
  "license": "MIT",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-contrib-concat": "~0.3.0",
    "grunt-contrib-copy": "^0.6.0",
    "grunt-contrib-cssmin": "~0.5.0",
    "grunt-contrib-jshint": "~0.6.3",
    "grunt-contrib-requirejs": "~0.4.1",
    "grunt-contrib-uglify": "~0.2.1",
    "grunt-strip": "~0.2.1"
  },
  "dependencies": {
    "express": "3.x"
  }
}

配置文件Gruntfile.js:

module.exports = function (grunt) {
//项目配置
    grunt.initConfig({
        uglify: {//javascript压缩
            build: {
                files: [
                    {
                        expand: true,
                        cwd: 'src/static/h5v3/script',
                        src: '**/*.js',
                        dest: 'dest/static/h5v3/script'
                    }
                ]
            }
        },
        cssmin: {//css压缩
            compress: {
                files: {
                    'dest/static/h5v3/css/style.css': [
                        "src/static/h5v3/css/*.css",
                        "src/static/h5v3/css/**/*.css"
                    ]
                }
            }
        },
        copy: {//拷贝目录
            script: {
                expand: true,
                cwd: 'src',
                src: ['**'],
                dest: 'dest',
                options: {
                    process: function (content, srcpath) {
                        if (srcpath.indexOf("static/h5v3/css") > -1) {
                            console.log("h5v3---css 不用拷贝。。。");
                            return;
                        } else {
                            return content;
                        }
                    }
                }
            }
        },
        clean: {//删除不想要的文件及目录
            build: {
                src: [ 'dest/static/h5v3/css' ]
            }
        }
    });

//加载相应模块
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-uglify');
//启动任务了
    grunt.registerTask('default', ['copy', 'clean', 'cssmin', 'uglify']);
}

 =================================配置结束=========================================

注运行效果见附件O(∩_∩)O哈哈~

相关推荐