processus de projet d'automatisation frontal construction Grunt

• Grunt Présentation
  • Chinese Accueil : http://www.gruntjs.net/
  • Il est un ensemble d'extrémité avant construction automatique outil, un outil NodeJS à base de ligne de commande
  • Il est un coureur de tâche , avec ses riches et puissants plug-ins
  • Caractéristiques communes:
    • fichiers de fusion (js / css)
    • fichiers compressés (js / css)
    • Vérificateur de grammaire (js)
    • less / processus culot précompilée
    • Autres ...
• Installation nodejs, version vue

 node -v

• Création d'une application simple, grunt_test

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

• Global installé grunt-cli

 npm install -g grunt-cli 

• Installation grunt

 npm install grunt --save-dev

• commande Exécuter pour construire le projet

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

• Profil: Gruntfile.js
  • Ce profil est essentiellement fonction du type de module de noeud
  • Etape 3 configurer le codeur comprenant:
    1. Initialisation configuration plug-in
    2. Charger la tâche plugins
    3. tâches de construction d'enregistrement
  • Code de base:

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

• Commande: // grognement de prompt succès, mais n'a pas d'effet (non à l'aide de plug-ins de tâches définies)
• présentations plug Grunt
  • Plug-in liste http://www.gruntjs.net/plugins page grognent site officiel
  • Plug Catégorie:
    • prise de contribution de l'équipe grognement: plug-in nom surtout au début contri-
    • Tiers plug-ins: le début ont tendance à ne pas contri-
  • plug-ins généraux:
    • les fichiers de purge grognement-contrib-clean-- (processus d'emballage généré)
    • grunt-contrib-concat-- code de fusion en une pluralité de fichiers dans le fichier
    • grunt-contrib-uglify-- fichier compressé js
    • grunt-contrib-jshint - javascript vérification des erreurs de syntaxe;
    • grunt-contrib-cssmin-- compression / fusion fichier css
    • grunt-contrib-htmlmin-- compressé fichier html
    • grognement-contrib-imagemin-- fichier d'image comprimé (sans perte)
    • grunt-contrib-copy-- copier des fichiers, dossiers
    • grunt-contrib-watch-- temps réel le suivi des changements de fichiers, appelez les tâches nécessaires pour rétablir l'exécution
• js de fusion: l'utilisation de plug-concat
  • commande:

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

• code:
  • 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);
      })();

• Configuration: Gruntfile.js
  • Tâches de configuration:

      concat: {
        options: { //可选项配置
          separator: ';'   //使用;连接合并
        },
        build: { //此名称任意
          src:  ["src/js/*.js"],  //合并哪些js文件
          dest: "build/js/built.js" //输出的js文件
        }
      }

• plugins de charge:

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

• tâches d'inscription:

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

• commande:

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

• js de compression: l'utilisation de plug-enlaidir
  • télécharger

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

• Configuration: Gruntfile.js
  • Tâches de configuration:

      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']
          }
        }
      }

• tâche de charge:

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

• tâches d'inscription:

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

• commande:

 grunt   //会在build下生成一个压缩的js文件

• vérification de js: en utilisant plug-jshint
  • commande:

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

• Codage: .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"]
  }
  

• Modifier src / js / test1.js

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

• Configuration: Gruntfile.js
  • Tâches de configuration:

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

• tâche de charge:

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

• tâches d'inscription:

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

• commande:

 grunt   //提示变量未定义和语句后未加分号 -->修改后重新编译

• Utilisation bouchon cssmin
  • Installation:

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

• code:
  • 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>

• Configuration: Gruntfile.js
  • Tâches de configuration:

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

• tâche de charge:

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

• tâches d'inscription:

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

• commande:

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

• Utilisez plugin montre (véritable automatisation)

  • 命令: NPM installer grunt-contrib-regarder-dev --save

  • Configuration: Gruntfile.js

    • Tâches de configuration:

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

• tâche de charge:

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

• tâches d'inscription:

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

• commande:

 grunt   //控制台提示watch已经开始监听, 修改保存后自动编译处理