grunt 入门实践实记

标签：

在Javascript的 开发过程中，经常会遇到一些重复性的任务，比如合并文件、压缩代码、检查语法错误、将Sass代码转成CSS代码等等。通 常，我们需要使用不同的工具，来完成不同的任务，既重复劳动又非常耗时。Grunt就是为了解决这个问题而发明的工具，可以帮助我们自动管理和运行各种任务。

sudo npm install grunt-cli -g //grunt-cli表示安装的是grunt的命令行界面，参数g表示全局安装。

npm install //这种方法是针对已有package.json的情况

npm init  //如果想要自动生成package.json文件，可以使用npm init命令,按照屏幕提示回答所需模块的名称和版本即可。

npm install <module> --save-dev  //已有的package.json文件不包括Grunt模块，可以在直接安装Grunt模块的时候，加上–save-dev参数，该模块就会自动被加入package.json文件。

命令脚本文件Gruntfile.js

实例gruntfile.js

module.exports = function(grunt) {

    
    // Project configuration.
    grunt.initConfig({

        //Read the package.json (optional)
        pkg: grunt.file.readJSON(‘package.json‘),

        // Metadata.
        meta: {
            basePath: ‘../‘,
            srcPath: ‘../assets local/sass/‘,
            deployPath: ‘../assets/‘
        },

        banner: ‘/*! <%= pkg.name %> - v<%= pkg.version %> - ‘ +
                ‘<%= grunt.template.today("yyyy-mm-dd") %>\n‘ +
                ‘* Copyright (c) <%= grunt.template.today("yyyy") %> ‘,

        // Task configuration.
        sass: {
            dist: {
                files: {
                    ‘<%= meta.deployPath %>css.css‘: ‘<%= meta.srcPath %>main.scss‘
                },
                options: {
                    sourcemap: ‘true‘,
                    style: ‘compact‘
                }
            }
        },
        watch: {
            scripts: {
                files: [
                    ‘<%= meta.srcPath %>/**/*.scss‘
                ],
                tasks: [‘sass‘]
            }
        },
        uglify: {
            release: {//任务四：合并压缩a.js和b.js
                files: {
                    ‘../assets/js/common.min.js‘: [‘../js/a.js‘, ‘../js/b.js‘]
                }
            }
        }
    });

    // These plugins provide necessary tasks.
    grunt.loadNpmTasks(‘grunt-contrib-sass‘);
    grunt.loadNpmTasks(‘grunt-contrib-watch‘);
    grunt.loadNpmTasks(‘grunt-contrib-uglify‘);

    // Default task.
    grunt.registerTask(‘default‘, [‘sass‘]);
    grunt.registerTask(‘default‘, [‘uglify:release‘]);
};

grunt 入门实践实记

标签：

原文地址：http://www.cnblogs.com/nimoer/p/4299641.html