Grunt教程-前端自动化

为什么挑选Grunt?

紧缩、编译、单元测试、代码搜检等 我们须要自动化,没必要重复劳动,减小工作量。为什么挑选Grunt呢?好像是没有更好的挑选了。

准备工作

装置node.js

Grunt基于Node.js,装置之前要先装置Node.js。

shellbrew install node  

更新npm

shellsudo npm install npm -g

装置 grunt-cli

装置 grunt-cli 并不等于装置了 Grunt 使命运转器
Grunt CLI 的使命是运转 Gruntfile 指定的 Grunt 版本。 如许就能够在一台电脑上同时装置多个版本的 Grunt。(没有懂,俺直接实战)

shellnpm install -g grunt-cli

Grunt必备文件

建立文件必需建立文件夹,我建立了一个 test 的文件夹,一个规范的 grunt 项目中必需有两个文件。

package.json:用于保存项目元数据。
Gruntfile.js : 用于设置或定义使命、加载 Grunt 插件。

在test1文件夹中建立这两个文件吧。那末文件中写什么内容呢。我们首先来关注一下package.json写什么内容

json{
  "name": "test",
  "version": "1.0.0"
}

运转

在项目的根目次下运转下面的敕令

shellnpm install

敕令实行历程

lognpm WARN package.json test1@1.0.0 No description
npm WARN package.json test1@1.0.0 No repository field.
npm WARN package.json test1@1.0.0 No README data

提醒说没有形貌信息没有README之类的
在根目次增加一个 README.md 文件

增加内容

在 package.json 中增加下面内容以后

{
  "name": "test",
  "version": "1.0.0",
  "description": "测试的例子",
  "repository": {
    "type": "git",
    "url": "https://github.com/JSLite/JSLite.git"
  }
}

于是乎高枕无忧了

装置 Grunt 插件

在此项目中装置 Grunt 插件

shellsudo npm install grunt --save-dev

package.json的文件内容发明多了 devDependencies 的信息
目次多了一个 node_modules 的文件夹

json{
  "name": "test",
  "version": "1.0.0",
  "description": "测试的例子",
  "repository": {
    "type": "git",
    "url": "https://github.com/JSLite/JSLite.git"
  },
  "devDependencies": {
    "grunt": "^0.4.5"
  }
}

运转 npm install <module> --save-dev,不仅会装置指定的 模块,还会自动增加到 devDependencies 区域中,且包含 版本局限。

grunt-contrib-uglify

插件用处:紧缩js,css文件
插件称号:grunt-contrib-uglify

装置

shellsudo npm install grunt-contrib-uglify --save-dev

装置胜利以后 在package.json的文件内容中的 devDependencies 的信息又增加了

json  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-uglify": "^0.8.0"
  }

运用方法

还记得我们上面说一个Grunt项目要两个必需的文件一个 package.jsonGruntfile.js,注重大小写,Linux辨别大小写的,建立 Gruntfile.js 并写入以下内容

js// 包装函数
module.exports = function(grunt) {

  // 使命设置,一切插件的设置信息
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    // uglify插件的设置信息
    uglify: {
        options: {
          banner: '/*! This is uglify test - ' +
            '<%= grunt.template.today("yyyy-mm-dd") %> */',
          beautify: true,//是不是紧缩
          mangle: false, //不殽杂变量名
          compress:true,//翻开或封闭运用默许选项源紧缩。
        },
        app_task: {
          files: {
            'build/app.min.js': ['lib/index.js', 'lib/test.js']
          }
        }
    }
  });

  // 通知grunt我们将运用插件
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // 通知grunt当我们在终端中输入grunt时须要做些什么
  grunt.registerTask('default', ['uglify']);

};

剖析

  • banner:在build/app.min.js 文件天生内容如日期什么的
  • files:将 lib 目次中的 js 紧缩兼并天生到 build 目次中天生 app.min.js

运转grunt

输入敕令下面敕令,好了,我的没有毛病平常的。如果有毛病,会有毛病日记,本身剖析哦。

shellgrunt

grunt-contrib-watch

插件用处:监控文件变化并自动运转grunt的watch插件
插件称号:grunt-contrib-watch

装置

shellsudo npm install grunt-contrib-watch --save-dev

运用

修正 Gruntfile.js

initConfig 中增加了

js    // watch插件的设置信息
    watch: {
        another: {
            files: ['lib/*.js'],
            tasks: ['uglify'],
            options: {
                // Start another live reload server on port 1337
                livereload: 1337
            }
        }
    }

增加了一行

jsgrunt.loadNpmTasks('grunt-contrib-watch');

数组中增加了watch

jsgrunt.registerTask('default', ['uglify','watch']);

增加了watch后,完全的 Gruntfile.js

js// 包装函数
module.exports = function(grunt) {

  // 使命设置,一切插件的设置信息
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    // uglify插件的设置信息
    uglify: {
        options: {
          banner: '/*! This is uglify test - ' +
            '<%= grunt.template.today("yyyy-mm-dd") %> */'
        },
        app_task: {
          files: {
            'build/app.min.js': ['lib/index.js', 'lib/test.js']
          }
        }
    },


    // watch插件的设置信息
    watch: {
        another: {
            files: ['lib/*.js'],
            tasks: ['uglify'],
            options: {
                // Start another live reload server on port 1337
                livereload: 1337
            }
        }
    }


  });

  // 通知grunt我们将运用插件
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-watch');

  // 通知grunt当我们在终端中输入grunt时须要做些什么
  grunt.registerTask('default', ['uglify','watch']);

};

grunt-contrib-watch

装置 stylus

shellsudo npm install grunt-contrib-watch --save-dev

修正 Gruntfile.js

initConfig 中增加了

jsstylus:{
    build: {
        options: {
            linenos: false,
            compress: false,
            banner: '\/** \n * <%= pkg.name %> - <%= pkg.description %>\n * version <%= pkg.version %> \n * author <%= pkg.author %> \n * date <%= grunt.template.today() %> \n**/\n'
        },
        files: [{
            'css/historyDetail.css': 'styl/historyDetail.styl'
        }]
    }
},

下面增加

js    grunt.loadNpmTasks('grunt-contrib-stylus');

paths 将自动运用@import来引入一些Stylus文件,比方一些Mixin鸠合,放在一个Stylus文件中举行保护,写在paths中后,就能够在每一个Stylus文件中挪用它们。define 能够定义一些全局变量,然后在Stylus中运用,但我不喜好运用这个设置,而是更喜好把全局变量放在一个零丁的Stylus文件中,然后将这个文件到场paths的数组中。一句话,把一切不会直接产出CSS的Stylus代码分红若干个Stylus文件,然后悉数增加到paths中,如许在一切Stylus文件中都能够随时挪用了,但要注重这些Stylus文件的挪用关联和运用先后顺序。

compresslinenos 是两个Boolean值,用来掌握是不是紧缩处置惩罚后的CSS代码以及是不是在CSS代码中保存解释。

banner 是一个字符串,会被安排在CSS文件的最前面,平常我用来写解释,比方

banner: '\/** \n * <%= pkg.name %> - <%= pkg.description %>\n * version <%= pkg.version %> \n * author <%= pkg.author %> \n * date <%= grunt.template.today() %> \n**/\n'

firebug 将掌握是不是运用一个FirebugStylus插件FireStylus for Firebug,能够在Firefox中调试Stylus。

use 能够引入一些Stylus的其他grunt插件。

经常使用模块设置

grunt-contrib-clean:删除文件。npm>>
grunt-contrib-compass:运用compass编译sass文件。npm>>
grunt-contrib-concat:兼并文件。npm>>
grunt-contrib-copy:复制文件。npm>>
grunt-contrib-cssmin:紧缩以及兼并CSS文件。npm>>
grunt-contrib-imagemin:图象紧缩模块。npm>>
grunt-contrib-jshint:搜检JavaScript语法。npm>>
grunt-contrib-uglify:紧缩以及兼并JavaScript文件。npm>>
grunt-contrib-watch:看管文件更改,做出响应行动。npm>>
grunt-contrib-stylus:stylus编写styl输出css npm>>

    原文作者:小弟调调
    原文地址: https://segmentfault.com/a/1190000002605983
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞