Grunt疾速入门

2024年1月26日 116次阅读 来源: booder

  • Grunt引见

    • 中文主页 : http://www.gruntjs.net/

    • 是一套前端自动化构建东西，一个基于nodeJs的敕令行东西

    • 它是一个使命运转器, 合营其雄厚壮大的插件

    • 经常运用功用:

      • 兼并文件(js/css)

      • 紧缩文件(js/css)

      • 语法搜检(js)

      • less/sass预编译处置惩罚

      • 别的…

  • 装置nodejs, 检察版本

    node -v

  • 建立一个简朴的运用grunt_test

    |- build----------构建天生的文件地点的文件夹
|- src------------源码文件夹   
    |- js---------------js源文件夹
    |- css--------------css源文件夹
|- index.html-----页面文件
|- Gruntfile.js---grunt设置文件(注重首字母大写)
|- package.json---项目包设置文件
    {
      "name": "grunt_test",
      "version": "1.0.0"   
    }

  • 全局装置 grunt-cli

    npm install -g grunt-cli

  • 装置grunt

    npm install grunt --save-dev

  • 运转构建项目敕令

    grunt  //提醒 Warning: Task "default" not found

  • 设置文件: Gruntfile.js

    • 此设置文件实质就是一个node函数范例模块

    • 设置编码包括3步:

      1. 初始化插件设置

      2. 加载插件使命

      3. 注册构建使命

    • 基础编码:

      module.exports = function(grunt){
  // 1. 初始化插件设置
  grunt.initConfig({
      //重要编码处
  });
  // 2. 加载插件使命
  // grunt.loadNpmTasks('grunt-contrib-concat');
  // 3. 注册构建使命
  grunt.registerTask('default', []);
};

    • 敕令: grunt //提醒胜利, 但没有任何结果(还没有运用插件定义使命)

  • Grunt插件引见

    • grunt官网的插件列表页面 http://www.gruntjs.net/plugins

    • 插件分类:

      • grunt团队孝敬的插件 : 插件名多数以contrib-开首

      • 第三方供应的插件 : 多数不以contrib-开首

    • 经常运用的插件:

      • grunt-contrib-clean——消灭文件(打包处置惩罚天生的)

      • grunt-contrib-concat——兼并多个文件的代码到一个文件中

      • grunt-contrib-uglify——紧缩js文件

      • grunt-contrib-jshint——javascript语法错误搜检；

      • grunt-contrib-cssmin——紧缩/兼并css文件

      • grunt-contrib-htmlmin——紧缩html文件

      • grunt-contrib-imagemin——紧缩图片文件(无损)

      • grunt-contrib-copy——复制文件、文件夹

      • grunt-contrib-requirejs——兼并紧缩requirejs治理的一切js模块文件

      • grunt-contrib-watch——及时监控文件变化、挪用响应的使命从新实行

  • 兼并js: 运用concat插件

    • 敕令:

      npm install grunt-contrib-concat --save-dev

    • 编码:

      • src/js/test1.js

        (function () {
function add(num1, num2) {
return num1 + num2;
}
console.log(add(10, 20));
})();

      • src/js/test2.js

        (function () {
var arr = [2,3,4].map(function (item, index) {
return item+1;
});
console.log(arr);
})();

    • 设置: Gruntfile.js

      • 设置使命:

        concat: {
  options: { //可选项设置
    separator: ';'   //运用;衔接兼并
  },
  build: { //此称号恣意
    src:  ["src/js/*.js"],  //兼并哪些js文件
    dest: "build/js/built.js" //输出的js文件
  }
}

      • 加载插件:

        grunt.loadNpmTasks('grunt-contrib-concat');

      • 注册使命:

        grunt.registerTask('default', ['concat']);

      • 敕令:

        grunt   //会在build下天生一个built.js

  • 紧缩js: 运用uglify插件

    • 下载

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

    • 设置: Gruntfile.js

      • 设置使命:

        pkg : grunt.file.readJSON('package.json'),
uglify : {
  options: {  //不是必需的
    banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
    '<%= grunt.template.today("yyyy-mm-dd") %> */'
  },
  build: {
    files: {
      'build/js/built-<%=pkg.name%>-<%=pkg.version%>.min.js': ['build/js/built.js']
    }
  }
}

      • 加载使命:

        grunt.loadNpmTasks('grunt-contrib-uglify');

      • 注册使命:

        grunt.registerTask('default', ['concat', 'uglify']);

      • 敕令:

        grunt   //会在build下天生一个紧缩的js文件

  • js语法搜检: 运用jshint插件

    • 敕令:

      npm install grunt-contrib-jshint --save-dev

    • 编码: .jshintrc

      {
  "curly": true,
  "eqeqeq": true,
  "eqnull": true,
  "expr" : true,
  "immed": true,
  "newcap": true,
  "noempty": true,
  "noarg": true,
  "regexp": true,
  "browser": true,
  "devel": true,
  "node": true,
  "boss": false,
  
  //不能运用未定义的变量
  "undef": true,
  //语句背面必需有分号
  "asi": false,
  //预定义不搜检的全局变量
  "predef": [ "define", "BMap", "angular", "BMAP_STATUS_SUCCESS"]
}

    • 修正src/js/test1.js

      (function () {
  function add(num1, num2) {
    num1 = num1 + num3
    return num1 + num2;
  }
  console.log(add(10, 20));
})();

    • 设置 : Gruntfile.js

      • 设置使命:

        jshint : {
  options: {
    jshintrc : '.jshintrc' //指定设置文件
  },
  build : ['Gruntfile.js', 'src/js/*.js'] //指定搜检的文件
}

      • 加载使命:

        grunt.loadNpmTasks('grunt-contrib-jshint');

      • 注册使命:

        grunt.registerTask('default', ['concat', 'uglify', 'jshint']);

      • 敕令:

        grunt   //提醒变量未定义和语句后未加分号 -->修正后从新编译

  • 运用cssmin插件

    • 装置:

      npm install grunt-contrib-cssmin --save-dev

    • 编码:

      • test1.css

        #box1 {
  width: 100px;
  height: 100px;
  background: red;
}

      • test2.css

        #box2 {
  width: 200px;
  height: 200px;
  background: blue;
}

      • index.html

        <link rel="stylesheet" href="build/css/output.min.css">
<div id="box1"></div>
<div id="box2"></div>

    • 设置 : Gruntfile.js

      • 设置使命:

        cssmin:{
  options: {
    shorthandCompacting: false,
    roundingPrecision: -1
  },
  build: {
    files: {
        'build/css/output.min.css': ['src/css/*.css']
    }
  }
}

      • 加载使命:

        grunt.loadNpmTasks('grunt-contrib-cssmin');

      • 注册使命:

        grunt.registerTask('default', ['concat', 'uglify', 'jshint', 'cssmin']);

      • 敕令:

        grunt    //在build/css/下天生output.min.css

  • 运用watch插件（真正完成自动化）

    • 敕令: npm install grunt-contrib-watch –save-dev

    • 设置 : Gruntfile.js

      • 设置使命:

        watch : {
  scripts : {
    files : ['src/js/*.js', 'src/css/*.css'],
    tasks : ['concat', 'jshint', 'uglify', 'cssmin'],
    options : {spawn : false}  
  }
}

      • 加载使命:

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

      • 注册使命:

        grunt.registerTask('default', ['concat', 'uglify', 'jshint', 'watch']);
革新：grunt.registerTask('myWatch', ['default','watch']);

      • 敕令:

        grunt   //控制台提醒watch已最先监听, 修正保留后自动编译处置惩罚
    原文作者：booder
    原文地址: https://segmentfault.com/a/1190000010295052
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞