自動ビルドとうなり声

記事の説明：この記事は、レガオのフロントエンドトレーニングキャンプのメモと経験です。何か問題がある場合は、指摘して教えていただければ幸いです。ありがとうございます。 

 1.自動化された建設

前書き：

自動化とは、手作業を機械に置き換えることを指します。建設は、あるものを別のものに変換する変換として理解できます。一般的に、自動構築とは、開発段階で記述されたソースコードを、本番環境で実行できるコードやプログラムに自動的に変換することです。この移行プロセスは、自動構築ワークフローと呼ばれます。可能性があります。環境の互換性によって引き起こされる問題。開発段階では、効率を向上させる文法、仕様、標準を使用します。たとえば、Webアプリケーションを開発する場合、ECMAScript NEXTを使用してコーディングの効率と品質を向上させ、sassを使用してCSSのプログラム可能性を強化してから、テンプレートを使用できます。ページ内の重複を抽象化するエンジン。HTML、これらの使用法のほとんどは、ブラウザーによって直接サポートされていません。これらのサポートされていないコード機能は、直接実行できるコードに変換されます。これらは、開発プロセスで使用して、これらの方法でコーディング効率を向上させることができます。

自動化された建設の最初の経験：

cssは最初に手書きで記述され、ブラウザで実行されます。

私たちはsassで構築します：

•  sassモジュールをインストールし、開発依存関係としてインストールします

yarn add sass --dev //或者 npm install sass --save-dev

• コマンドを使用してsassファイルをcssファイルに変換します

 scssファイルを変換してcssフォルダーに配置します

.\node_modules\.bin\sass scss/main.scss css/style.css

 

• 上記のコマンドは煩雑すぎるため、単純化し、NPMスクリプトを使用し、ビルドコマンドをパッケージ化して、ワークフローの構築を自動化する最も簡単な方法を実現できます。

次に、コマンドラインインターフェイスでpackagedコマンドを使用して、sassファイルをcssファイルに変換します。

yarn build //或者 npm run build 
注意：yarn build 的run可以省略，而npm不可以

•  browser-syncモジュールをインストールして、プロジェクトを実行するためのテストサーバーを起動します

yarn add browser-sync --dev// 或者 npm install browser-sync --save-dev

次に、次の図に示すように、NPMスクリプトを使用してコマンドをパッケージ化します。

最後に、コマンドラインインターフェイスでpackagedコマンドを使用してテストサーバーを起動し、ブラウザーを起動してWebページを実行します。

yarn serve //或者npm run serve

 

サーブコマンドを開始する前にビルドコマンドを機能させるために、サーブコマンドが実行される前に自動的に実行される保存コマンドを追加できます。このとき、サーブを再度実行すると、自動的に実行されます。最初にビルドコマンドを実行します。ビルドが完了したら、対応するサーブを実行します。

--watchパラメーターをsassコマンドに追加することもできます。そうすると、sassは、動作中にファイルの変更を監視します。コード内のファイルが変更されると、自動的にコンパイルされます。

しかし、serveを実行するとき、sassはファイルの変更を待ってserveコマンドの実行をブロックします。

これにより、次のブラウズ同期が後で機能しなくなります。この場合、複数のタスクを同時に実行する必要があります。ここでは、npm-run-allモジュールを使用してこれを実現できます。最初にこのモジュールをインストールします。

yarn add npm-run-all --dev

このモジュールを入手したら、スクリプトに新しいコマンドを追加できます。このコマンドはstartと呼ばれます。このコマンドでは、npm run allでrun-pコマンドを使用して、ビルドコマンドとサーブコマンドを同時に実行します。インラインで実行します。 ：

yarn start

このとき、sassファイルの内容を変更してみてください。cssファイルもそれに応じて変更されます。

browser-syncに--files \ "css / *。css \"を追加します。このパラメーターは、browser-syncの開始後、ファイルが変更されると、プロジェクト内の一部のファイル（この場合はcssファイル）の変更を監視できます。 、Browser-syncは、これらのファイルのコンテンツをブラウザーに自動的に同期して、ブラウザーインターフェースを更新し、効果を更新し、コードの変更後にブラウザーを手動で更新しないようにします。

簡単な要約：スクリプトのbuildコマンドでは、sassファイルの変更を自動的に監視してsassをコンパイルし、browser-syncがWebサービスを開始し、ファイルが変更されるとブラウザーを更新します。

一般的に使用される自動化ツール：

複雑なプロジェクトと比較して、npmスクリプトは比較的面倒で、より専門的なツールを必要とします。最も使用される開発ツールは主に次のとおりです。

• Grunt、そのプラグインは、あなたがやりたいことのほとんどすべてを自動化するのに役立ちますが、その作業プロセスは一時ファイルに基づいているため、ビルド速度は遅くなります。
• Gulpは、gruntのビルド速度が非常に遅いという問題を解決します。ビルドプロセスはメモリ内で完了します。これは、ディスクの読み取りおよび書き込み速度よりもはるかに高速です。さらに、Grauntとは対照的に、デフォルトで複数のタスクの同時実行をサポートします。より直感的で理解しやすく、プラグインのエコロジーは比較的完全です。現在最も人気のあるビルドシステムです。
• FISは、最初の2つのマイクロカーネル構築システムと比較すると、バンドルパッケージに似ています。たとえば、リソースの読み込みやモジュラー開発を簡単に処理できるなど、プロジェクトの一般的な要件を可能な限り統合します。、コード展開、リソースの最適化など。FISは初心者に適しています。

厳密に言えば、webpackはモジュールパッケージツールです。

2.Gruntの基本的な使用法

• 新しい空のプロジェクト（空のフォルダー）を作成し、yarnを使用して初期化し、package.jsonファイルを生成します

yarn init --yes

• ヤーンコマンドでうなり声モジュールを追加

yarn add grunt

• プロジェクトのルートディレクトリにgruntfileファイルを追加します。このファイルはGruntのエントリファイルです。

code gruntfile.js

// Grunt 的入口文件
// 用于定义一些需要 Grunt 自动执行的任务
// 需要导出一个函数
// 此函数接收一个 grunt 的形参，内部提供一些创建任务时可以用到的API

module.exports = grunt => {
    //registerTask 去注册一个任务，第一个参数去指定任务的名字，第二个参数去指定一个任务函数，也就是当任务发生时自动执行的函数
    grunt.registerTask('foo',() =>{
        console.log('hello grunt~')
    })
}

• コンソールでyarngruntコマンド出力を使用します。

yarn grunt foo// foo 是任务名

• 複数のタスクを追加することもできます。コマンドを使用してヘルプを表示します。

yarn grunt --help

// Grunt 的入口文件
// 用于定义一些需要 Grunt 自动执行的任务
// 需要导出一个函数
// 此函数接收一个 grunt 的形参，内部提供一些创建任务时可以用到的API

module.exports = grunt => {
    //registerTask 去注册一个任务，第一个参数去指定任务的名字，第二个参数去指定一个任务函数，也就是当任务发生时自动执行的函数
    grunt.registerTask('foo',() =>{
        console.log('hello grunt~')
    })

    grunt.registerTask('bar','任务描述',() =>{
        console.log('other task~')
    })
}

コンソール：

• デフォルトのタスクを登録できます。糸がうなり声を上げると、デフォルトが自動的に呼び出されます

// Grunt 的入口文件
// 用于定义一些需要 Grunt 自动执行的任务
// 需要导出一个函数
// 此函数接收一个 grunt 的形参，内部提供一些创建任务时可以用到的API

module.exports = grunt => {
    //registerTask 去注册一个任务，第一个参数去指定任务的名字，第二个参数去指定一个任务函数，也就是当任务发生时自动执行的函数
    grunt.registerTask('foo',() =>{
        console.log('hello grunt~')
    })

    grunt.registerTask('bar','任务描述',() =>{
        console.log('other task~')
    })

    grunt.registerTask('default',() =>{
        console.log('default task~')
    })
}

fooとbarのタスクが自動タスクのタスクに配置されている場合、それらは自動的に連続して実行されます

// Grunt 的入口文件
// 用于定义一些需要 Grunt 自动执行的任务
// 需要导出一个函数
// 此函数接收一个 grunt 的形参，内部提供一些创建任务时可以用到的API

module.exports = grunt => {
    //registerTask 去注册一个任务，第一个参数去指定任务的名字，第二个参数去指定一个任务函数，也就是当任务发生时自动执行的函数
    grunt.registerTask('foo',() =>{
        console.log('hello grunt~')
    })

    grunt.registerTask('bar','任务描述',() =>{
        console.log('other task~')
    })

    // grunt.registerTask('default',() =>{
    //     console.log('default task~')
    // })

    grunt.registerTask('default',['foo','bar'])

}

• gruntでは非同期タスクがサポートされています。setTimeoutを使用して、このタスクの非同期タスクをシミュレートします。

// Grunt 的入口文件
// 用于定义一些需要 Grunt 自动执行的任务
// 需要导出一个函数
// 此函数接收一个 grunt 的形参，内部提供一些创建任务时可以用到的API

module.exports = grunt => {
    //registerTask 去注册一个任务，第一个参数去指定任务的名字，第二个参数去指定一个任务函数，也就是当任务发生时自动执行的函数
    grunt.registerTask('foo',() =>{
        console.log('hello grunt~')
    })

    grunt.registerTask('bar','任务描述',() =>{
        console.log('other task~')
    })

    // grunt.registerTask('default',() =>{
    //     console.log('default task~')
    // })

    grunt.registerTask('default',['foo','bar'])

    grunt.registerTask('async-task',() =>{
        setTimeout(() =>{
            console.log('async task working~')
        },1000)
    })
}

コマンドラインで非同期タスクを実行すると、コンソールの遅延印刷が表示されます。

gruntコードは、デフォルトで同期モードをサポートしています。非同期操作が必要な場合は、このasyncメソッドを使用してコールバック関数を取得する必要があります。非同期操作が完了したら、このコールバック関数を呼び出します。

grunt.registerTask('async-task',function(){
        const done = this.async()
        setTimeout(() =>{
            console.log('async task working~')
            done()//表示下这个任务已经完成了，grunt就知道这个是个异步任务，会等待done的执行，直到done执行，grunt才会结束这个任务的执行
        },1000)
    })

グラントマーキングタスクが失敗しました

ビルドコードでエラーが発生した場合、たとえば、必要なファイルが見つからない場合は、このタスクを失敗したタスクとしてマークし、関数でreturnfalseを実装できます。

module.exports = grunt => {
    grunt.registerTask('bad',() =>{
        console.log('bad workding~')
        return false
    })
}

コンソールでタスクを実行すると、タスクが失敗したことが示されます。タスクがタスクリストにある場合、タスクが失敗した後、後続のタスクは実行されません。たとえば、次のコードでは、バータスクを実行できません： 

module.exports = grunt => {
    grunt.registerTask('bad',() =>{
        console.log('bad workding~')
        return false
    })

    grunt.registerTask('foo',() =>{
        console.log('foo task~')
    })

    grunt.registerTask('bar',() =>{
        console.log('bar task~')
    })

    grunt.registerTask('default',['foo','bad','bar'])
}

上記のコンソールは、barタスクが実行されていないことを示しています。-forceを使用すると、すべてのタスクが実行されます。

yarn grunt default --force

非同期タスクの場合、falseを返すようにマークする方法はありません。完了にfalseを追加し、失敗したタスクとしてマークする必要があります。

grunt.registerTask('bad-async',function (){
        const done = this.async()
        setTimeout(() =>  {
            setTimeout(() => {
                console.log('bad async')
                done(false)
            },1000)
        })
    })

グラントの構成方法

grunt.initConfig（）は、いくつかの構成オプションを追加するために使用されるAPIです。{}オブジェクトの形式でパラメーターを受け取り、オブジェクトの属性名（キー）は通常、タスク名と一致します。値は次のようになります。いかなるタイプ。

module.exports = grunt => {
    grunt.initConfig({
        foo:'bar'
    })
    //有了上面的配置属性之后，就可以在下面的任务当中使用这个配置属性

    grunt.registerTask('foo',() =>{
        console.log(grunt.config('foo'))//接收一个字符串参数，这个字符串参数是在config当中所指定的属性的名字
    })
}

属性値がオブジェクトの場合：

module.exports = grunt => {
    grunt.initConfig({
        foo:{//属性值如果是个对象的话
            bar:123
        }
    })
    //有了上面的配置属性之后，就可以在下面的任务当中使用这个配置属性

    grunt.registerTask('foo',() =>{
        console.log(grunt.config('foo.bar'))//可以拿到对应的属性值
    })
}

グラント多目的ミッション

Gruntは、サブタスクの概念として理解できる多目的モードのタスクをサポートします。この形式のタスクは、さまざまな構築タスクの後続の特定の実装に役立ちます。
 

module.exports = grunt => {
    //多目标模式，可以让任务根据配置形成多个子任务
    //接收两个参数，第一个参数是任务的名字，第二个参数是一个函数(任务执行过程所需要做的事情)
    grunt.registerMultiTask('build'，function(){
        console.log('build task')
    })
}

コンソールでタスクを実行すると、ビルドタスクに一部のターゲットが設定されていないことを示すエラーが報告されます。これは、マルチターゲットタスクを設定するときに、このマルチターゲットタスクに異なるターゲットを構成する必要があるためです。 、gruntのinitメソッドを使用してconfigで構成するには：

module.exports = grunt => {
    //多目标模式，可以让任务根据配置形成多个子任务
    grunt.initConfig({
        build:{
            css:'1',
            js:'2'
        }
    })
    //接收两个参数，第一个参数是任务的名字，第二个参数是一个函数(任务执行过程所需要做的事情)
    grunt.registerMultiTask('build',function(){
        console.log('build task')
    })
}

コンソールの実行後、2つのサブタスクが実行されていることがわかります。実際、これらはサブタスクとは呼ばれていません。gruntではマルチターゲットと呼ばれています。つまり、ビルドタスクには2つのターゲットがあります。1つはjsターゲット、もう1つはcssターゲットです。 。

ターゲットを個別に実行する場合は、コマンドラインの後に対応するターゲット名を追加できます。

yarn grunt build：css

このタスクでは、これを介して現在の目標の名前を取得し、データを介してこの目標に対応するデータを取得してから、コンソールでタスクの対応する目標を実行できます。

module.exports = grunt => {
    //多目标模式，可以让任务根据配置形成多个子任务
    grunt.initConfig({
        build:{
            css:'1',
            js:'2'
        }
    })
    //接收两个参数，第一个参数是任务的名字，第二个参数是一个函数(任务执行过程所需要做的事情)
    grunt.registerMultiTask('build',function(){
        console.log(`tartget:${this.target},data:${this.data}`)
    })
}

指定されたオプションを除いて、ビルド内の各属性のキーがターゲットになります

module.exports = grunt => {
    //多目标模式，可以让任务根据配置形成多个子任务
    grunt.initConfig({
        build:{
            //在option当中指定的信息会作为这个任务的配置选项出现，控制台打印不出options内容
            options:{
                foo:'bar'
            },
            css:'1',
            js:'2'
        }
    })
    //接收两个参数，第一个参数是任务的名字，第二个参数是一个函数(任务执行过程所需要做的事情)
    grunt.registerMultiTask('build',function(){
        console.log(this.options())//要想打印options里面的内容，需要用this的options方法
        console.log(`tartget:${this.target},data:${this.data}`)
    })
}

ターゲットの属性値は、オプションオブジェクトにすることもできます。

module.exports = grunt => {
    //多目标模式，可以让任务根据配置形成多个子任务
    grunt.initConfig({
        build:{
            //在option当中指定的信息会作为这个任务的配置选项出现
            options:{
                foo:'bar'
            },
            //如果说目标的配置也是一个对象的话，这个属性也可以添加options,这个options能覆盖掉对象里的options
            css:{
                options:{
                    foo:'baz'
                }
            },
            js:'2'
        }
    })
    //接收两个参数，第一个参数是任务的名字，第二个参数是一个函数(任务执行过程所需要做的事情)
    grunt.registerMultiTask('build',function(){
        console.log(this.options())
        console.log(`tartget:${this.target},data:${this.data}`)
    })
}

Gruntプラグインの使用

grunt.loadNpmTaks（）は、プラグインによって提供されるいくつかのタスクをロードします。

grunt.loadNpmTasks（ 'grunt-contrib-clean'）、grunt-contrib-cleanプラグインをロードします。このプラグインは、プロジェクト開発中に生成された一時ファイルをクリーンアップするために使用されます。

gruntプラグインの一般的な命名方法：grunt-contrib-pluginname

gruntプラグインを使用してプラグインタスクを実行する場合、完全なプラグイン名の後のpluginnameは、実際には指定されたタスク名です。yarngruntpluginname //またはnpmrun grunt pluginname

• grunt-contrib-clean：

安装：$ヤーンadd grunt-contrib-clean //またはrnpm install grunt-contrib-clean

  module.exports = grunt => {
      grunt.initConfig({
          clean: {
              temp: 'temp/app.js', // 所要清除的文件的具体路径
              tempTxt: 'temp/*.txt', // 使用通配符*，删除所有txt文件
              tempFiles: 'temp/**'   // 使用**的形式，删除temp整个文件夹
          }
      })
      
      grunt.loadNpmTasks('grunt-contrib-clean')
  }

使用法：プラグインのタスクは、initConfig（）で構成する必要があります。

module.exports = grunt => {
  grunt.initConfig({
    clean:{
      // temp:'temp/app.js'//清除temp下的app.js文件
      // temp:'temp/*.txt'//清除temp下所有的txt文件
      temp:'temp/**'//清除temp目录下所有的文件
    }
  })
  grunt.loadNpmTasks('grunt-contrib-clean')
}

一時ファイルがクリアされます

• Grunt-sass：内部でsassからnpmに依存するnpmモジュールです。サポート用のsassモジュールを提供するにはnpmが必要なので、両方のモジュールをインストールする必要があります。

プラグインモジュールをインストールします。yarnaddgrunt-sassまたはnpminstall grunt-sass sass --save-dev

sassを構成します。

module.exports = grunt => {
  grunt.initConfig({
    sass:{
      main:{//需要指定输入文件，以及最终输出的css文件路径
        files:{
          //属性名(键)为,需要输出的css的路径
          //属性值为需要输入的scss文件的路径
          'dist/css/main.css':'src/scss/main.scss'
        }
      }
    }
  })

  grunt.loadNpmTasks('grunt-sass')
}

このとき、実行中のコンソールがエラーを報告するため、実装オプションを渡す必要があります。実装オプションは、sassコンパイルの処理に使用するgrunt-sassのモジュールを指定するために使用されます。

sassにオプションを追加します。

const sass = require('sass')//导入sass模块

module.exports = grunt => {
  grunt.initConfig({
    sass:{
      options:{
        sourceMap:true,//生成对应的sourceMap文件
        implementation:sass//把sass模块传入属性当中
      },
      main:{//需要指定输入文件，以及最终输出的css文件路径
        files:{
          //属性名(键)为,需要输出的css的路径
          //属性值为需要输入的scss文件的路径
          'dist/css/main.css':'src/scss/main.scss'
        }
      }
    }
  })

  grunt.loadNpmTasks('grunt-sass')
}

consoleコマンドは次のように実行されます。

コンパイルされたscssファイルは次のフォルダーにあります。

詳細については、grunt-sassの公式ドキュメントをご覧ください。

• grunt-babelプラグイン。ES6構文のコンパイルに使用されます。Babelのコアモジュール@babel / coreとBabelのプリセット@babel / preset-envを使用する必要があります。

プラグインモジュールをインストールします。

 yarn add grunt-babel @babel/core @babel/preset-env --dev

現時点では、babelタスクを追加するためにgrunt.loadNpmTasks（）が必要です。grunt-fileがますます複雑になるにつれて、このメソッドがますます使用されるようになります。この時点で、モジュール（ load-grunt-tasks ）があります。減らすことができるコミュニティでこの方法の使用：

1. モジュールをインストールします。

    
    yarn add load-grunt-tasks --dev //或者 npm install load-grunt-tasks -save-dev
   

    

2. 基本的な使用法：

     const loadGruntTasks = require('load-grunt-tasks')
     
     module.exports = grunt => {
         loadGruntTasks(grunt) // 自动加载所有的 grunt 插件中的任务
     }
   

    

babelモジュールをインストールした後、対応するjsを変更します。

  const loadGruntTasks = require('load-grunt-tasks')
  
  module.exports = grunt => {
      grunt.initConfig({
          babel: {//将ECMAScript最新特性转换为js
              options: { 
                  sourceMap: true,
                  // //你需要转换哪些特性，把这些特性打包形成了preset
                  presets: ['@babel/preset-env'] //env 会默认根据最新的es特性去做对应的转换
              },
              main: {
                  files: {
                      'dist/js/app.js': 'src/js/app.js'
                  }
              }
          }
      })
      loadGruntTasks(grunt) // 自动加载所有的 grunt 插件中的任务
  }

ヤーングラントバベルを実行します

 

このとき、jsフォルダー内のjsファイルは元のes6コードを自動的にes5に変換し、対応するsourceMapファイルも生成します。

• grunt-contrib-watchプラグインは、ファイルが変更されたときに、コンパイルを自動的に追跡できることを意味します

プラグインモジュールをインストールします

 yarn add grunt-contrib-watch --dev // 或者 npm install grunt-contrib-watch -save-dev 

基本的な使用法：

const sass = require('sass')//导入sass模块
const loadGruntTasks = require('load-grunt-tasks')

module.exports = grunt => {
  grunt.initConfig({
    sass:{
      options:{
        sourceMap:true,//生成对应的sourceMap文件
        implementation:sass//把sass模块传入属性当中
      },
      main:{//需要指定输入文件，以及最终输出的css文件路径
        files:{
          //属性名(键)为,需要输出的css的路径
          //属性值为需要输入的scss文件的路径
          'dist/css/main.css':'src/scss/main.scss'
        }
      }
    },
    babel:{//将ECMAScript最新特性转换为js
      options:{
        sourceMap:true,
        //你需要转换哪些特性，把这些特性打包形成了preset
        presets:['@babel/preset-env']//env 会默认根据最新的es特性去做对应的转换
      },
      main:{
        files:{
          'dist/js/app.js':'src/js/app.js'
        }
      }
    },
    watch:{
      js:{
        files:['src/js/*.js']//监视特定文件
        tasks:['babel']//当你监视的这些文件发生改变之后需要执行的任务
      },
      css:{
        files:['src/scss/*.scss']//监视特定文件
        tasks:['sass']//当你监视的这些文件发生改变之后需要执行的任务
      },
    }
  })

  // grunt.loadNpmTasks('grunt-sass')
  loadGruntTasks(grunt)
  //使用映射，确保在启动时，运行各种编译任务，然后再启动监听
  grunt.registerTask('default',['sass','babel','watch'])
}

コマンドを実行

yarn grunt