VPSでGruntとNode.jsを使用してタスクの自動化を設定する方法

投稿日: 2022-04-20 2022-10-17
タグ: Node.js, ubuntu

序章

では、最新で使いやすく、ユーザーにとって魅力的で、すべてのブラウザーとプラットフォームでうまく機能する独自のWebサイトを開発したいですか？まあ、これは通常あなたのウェブサイトの複雑さに基づいて多くの作業を必要とします。しかし、アプリケーションの開発とワークフローに非常に役立つ素晴らしいツールがあります。それは、Gruntと呼ばれるタスクベースのビルドツールです。

Gruntを使用すると、ほとんど何でもできます。ソースコードの変更を監視しながら、連結や縮小などの特定のタスクを実行するように構成できます。

混乱している？上記のタスクがサイトのパフォーマンスにどのように影響し、なぜそれらを使用する必要があるのかを説明します。

連結

ソースファイルを連結すると、複数のJavaScript（またはCSS）ファイルを1つのファイルに結合したり、ニーズに基づいてグループ化したりすることで、ブラウザーが行う必要のある要求の数を減らすことができます。これは、ファイルがどれほど小さくても、ブラウザーが行うすべての要求に少なくとも数ミリ秒かかるため、効果的です。これはあまり聞こえないかもしれませんが、ほとんどのWebサイトは、いくつかのスクリプト、スタイルシート、画像、およびその他のアセットで構成されています。これにより、サイトのパフォーマンスに大きな影響があります。ブラウザが1つのリクエストに50ミリ秒かかると想像すると、20のソースファイルはページの読み込み時間を1秒遅くします。私を信じてください、誰も遅いウェブサイトが好きではありません。

最小化

連結によって最も効果的な結果が得られるとは思わないでください。開発者は、ソースコードにコメントを付けたり、整理したり、構造化したりして、他の人や自分自身が読みやすく、デバッグしやすいようにすることで、多くのスペースを浪費する傾向があります。これ自体は悪いことではありません。実際、開発者はそうすることをお勧めしますが、ブラウザはコードがどれほど美しく構造化されているかを気にせず、どのように見えても実行します。縮小とは、機能を壊したり変更したりすることなく、ソースファイルから不要な文字をすべて削除するプロセスです。コメント、空白、および改行文字は不要なスペースを占有し、実行に必要ありません。 JavaScriptファイルの変数名を短くしたり、特定のステートメントを圧縮したりするなど、他のさまざまな小さな最適化が頻繁に行われます。これにより、ブラウザに送信する必要のあるデータの量が大幅に削減され、ページの読み込み時間がさらに短縮されることがよくあります。

Gruntを使用してタスクを自動的に実行する

Gruntはシンプルで、ほとんどすべてが自動化されています。ソースコードに小さな変更を加えるたびに、連結プロセスと縮小プロセスを手動で手動で実行することは絶対に避けてください。ここでGruntが登場します。これにより、仕事がより速く簡単になるだけでなく、より楽しくなります。セットアップには1回かかり、その後はゼロの労力で済みます。

Gruntのもう1つの利点は、そのエコシステムです。これにより、Gruntの成長と、多くの新しい便利なプラグインの開発につながります。では、頻繁に使用するカスタムタスクを使用して独自のGruntプラグインを作成してみませんか？最も一般的なタスクのいくつかはすでにGruntプラグインに変換されているため、プラグインリストを確認し、必要なプラグインを選択して構成するだけで、タスクの自動化を設定できます。

要件

このチュートリアルは、node.js、npm、SSHを使用したVPSへの接続などの基本的なLinux管理タスクに既に精通していることを前提としていますが、最も重要なことは、ExpressなどのWebアプリケーションフレームワークを使用した基本的なWebサイトプロジェクトがすでにあることです。

node.jsに慣れていない場合、またはまだインストールしていない場合は、 node.js 上記の記事とチュートリアルページのセクションで、オペレーティングシステムのインストール手順を確認してください。

ヘルプとコミュニティのページにも多くのすばらしい記事があります。 Linuxの基本。

インストールと構成

次のコマンドを発行して、Gruntのコマンドラインインターフェイス（CLI）をグローバルにインストールすることから始めましょう。

npm install -g grunt-cli

あなたが使用する必要があるかもしれません sudo npm install -g grunt-cli （Linux、OSX、BSDなどを使用している場合）またはWindowsベースのシステムで管理者としてコマンドを実行します。

次に、を使用してWebプロジェクトのディレクトリに変更する必要があります。 cd /path/to/your/project/ 指図。

次のコマンドを使用して、Gruntと必要なGrunt-pluginの依存関係をプロジェクトディレクトリにインストールします。

npm install grunt grunt-contrib-concat grunt-contrib-uglify grunt-contrib-cssmin grunt-contrib-watch --save-dev

と呼ばれる新しいGrunt構成ファイルを作成します Gruntfile.js プロジェクトのルートレベルで、次のサンプル構成を追加します。

module.exports = function(grunt) {

  grunt.initConfig({
    jsDir: 'public/javascripts/',
    jsDistDir: 'dist/javascripts/',    
    cssDir: 'public/stylesheets/',
    cssDistDir: 'dist/stylesheets/',
    pkg: grunt.file.readJSON('package.json'),
    concat: {
      js: {
        options: {
          separator: ';'
        },
        src: ['<%=jsDir%>*.js'],
        dest: '<%=jsDistDir%><%= pkg.name %>.js'
      },
      css: {
        src: ['<%=cssDir%>*.css'],
        dest: '<%=cssDistDir%><%= pkg.name %>.css'
      }
    },
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%=grunt.template.today("dd-mm-yyyy") %> */\n'
      },
      dist: {
        files: {
          '<%=jsDistDir%><%= pkg.name %>.min.js': ['<%= concat.js.dest %>']
        }
      }
    },
    cssmin: {
      add_banner: {
        options: {
          banner: '/*! <%= pkg.name %> <%=grunt.template.today("dd-mm-yyyy") %> */\n'
        },
        files: {
          '<%=cssDistDir%><%= pkg.name %>.min.css': ['<%= concat.css.dest %>']
        }
      }
    },
    watch: {
    files: ['<%=jsDir%>*.js', '<%=cssDir%>*.css'],
    tasks: ['concat', 'uglify', 'cssmin']
    }
  });

  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-watch');

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

特定のニーズに応じて、4つの変数「jsDir」、「jsDistDir」、「cssDir」、および「cssDistDir」を編集します。これらの変数は、Javascript / CSSファイルのソースディレクトリとすぐに配布できる（「dist」）ディレクトリを定義します。「dist」ディレクトリには、連結および縮小されたソースコードが含まれます。

単に発行することにより、Gruntタスクを実行します grunt 端末に次のような出力が表示されます。

Running "concat:js" (concat) task
File "dist/js/application-name.js" created.

Running "concat:css" (concat) task
File "dist/css/application-name.css" created.

Running "uglify:dist" (uglify) task
File "dist/js/application-name.min.js" created.

Running "cssmin:add_banner" (cssmin) task
File dist/css/application-name.min.css created.

Running "watch" task
Waiting...

Gruntは、ソースコードの変更を監視し、変更するたびにソースコードを連結/縮小します。

Gruntの詳細については、公式サイトとドキュメント（ http://gruntjs.com ）にアクセスしてください。

getdocs

13036