Grunt初体验

前提条件：已经安装了NodeJS、cnpm

1，安装grunt-cli：

cnpm install -g grunt-cli

注意这里是安装在全局的，不安装全局使用grunt命令的时候需要配置路径，简单点就放全局了

2，安装grunt插件

>cnpm install grunt
>cnpm install grunt-contrib-clean  // 文件清理
>cnpm install grunt-contrib-concat // 合并js文件
>cnpm install grunt-contrib-copy // 文件复制
>cnpm install grunt-contrib-jshint // js代码检查
>cnpm install grunt-contrib-qunit // 单元测试
>cnpm install grunt-contrib-requirejs // 文件依赖检测
>cnpm install grunt-contrib-uglify // 压缩js代码
>cnpm install grunt-contrib-watch // 文件监控
>cnpm install grunt-contrib-less // LESS编译
>cnpm install grunt-css // css压缩
>cnpm install grunt-strip //

扫描二维码关注公众号，回复： 419738 查看本文章

3，配置文件：Gruntfile.js

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            options: {
                banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                src: 'src/js/<%=pkg.file %>.js',
                dest: 'dest/js/<%= pkg.file %>.min.js'
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.registerTask('default', ['uglify']);
}

4，配置文件：package.json

{
    "name": "f-angular",
    "file": "f-angular",
    "version": "0.1.0",
    "description": "f-angular",
    "license": "MIT",
    "devDependencies": {
        "grunt": "~0.4.1",
        "grunt-contrib-jshint": "~0.6.3",
        "grunt-contrib-uglify": "~0.2.1",
        "grunt-contrib-requirejs": "~0.4.1",
        "grunt-contrib-copy": "~0.4.1",
        "grunt-contrib-clean": "~0.5.0",
        "grunt-strip": "~0.2.1"
    },
    "dependencies": {
    }
}

5，准备一个被压缩的js文件，然后执行grunt：

> grunt
Running "uglify:build" (uglify) task
File dest/js/f-angular.min.js created: 1 kB → 321 B
>> 1 file created.

Done.

我的源文件是src/js/f-angular.js

压缩后再desc/js/f-angular.js

猜你喜欢