最近、私はhtml / cssでモバイルアプリケーションを開発するためのツールを見つけることについて疑問に思いました。 要件は、可用性、軽さ、セットアップの容易さでした。 選択は、組み込みのNode NPMマネージャーに委ねられました。 NPMに含まれるもの

カスタムスクリプトのインストールや実行などの基本的なタスクのためのツール。 また、NPMはGruntほど大きくなく、モジュール自体を適応させる必要もありません。 コマンドラインからモジュールを起動します。

開発者ツールとしてのNPM

NPMは、既存のモジュールの作業を相互に整理できます。 はい

解決策はGruntに比べてエレガントで劣っていることもありますが、各タスクには適切なツールが必要です。 なぜなら NPMがちょうど起動します

コマンドラインを使用してモジュールを作成する場合、作成する必要も、行方不明になるのを待つ必要もありません

ほとんどの場合、すでに実装されています。

NPMのインストール

NPMの良い点は、Node.JSがインストールされている場合にインストールされることです。 構成ファイルのみを書き込む必要があり、

基本的な手順を実行して、プロジェクトをビルドおよびテストできます。

NPMの構成例

{ "name": "FrontendTemplate", "description": "", "author": "Sergei Z.", "scripts": { }, "dependencies": { }, "devDependencies": { } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この場合、devDepenciesおよびscriptsブロックに関心があります。 devDepenciesでは、開発で使用するモジュールを示します。 スクリプトでは、アセンブリ、プロジェクトのテスト用のスクリプトを作成します。



便利なモジュールをいくつか追加しましょう。

 { "name":" FrontendTemplate", "version": "0.0.1", "description": "", "repository": "", "author": "Sergei Z.", "dependencies": { }, "devDependencies": { "supervisor": "*", "jshint": "~1.1.0", "less": "~1.3.3", "jade": "*", "uglify-js2": "*" } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ジェイド。 Jadeテンプレートエンジンモジュールは、htmlの生成に使用されます。

Uglify-JS2。 JSコードを最小化するモジュール。

少ない。 より少ないファイルからcssをコンパイルするためのモジュール。

JSHint。 JSコードの品質をチェックするためのモジュール。 使用することを強くお勧めします。

監督者 ディレクトリ内のファイルを変更するときにJSアプリケーションまたはコマンドを起動するためのモジュール。





これをpackage.jsonに保存します。 ディレクトリに移動し、npm installを実行します。 NPMはモジュールをnode_modulesディレクトリーにロードします。

これはモジュールのインストールのみです。モジュールの起動に関しては、スクリプトセクションを構成に追加する必要があります。 また

WindowsではUnixUtilsが必要です 。

 { "name": "frontendTemplate", "version": "0.0.1", "description": "", "scripts": { "less": "cat src/less/*.less > build/app.less.temp && lessc -x ./build/app.less.temp > ./build/css/app.css && rm -f build/app.less.temp", "uglify": "cat src/js/lib/*.js src/js/*.js > build/app.js.temp && uglifyjs2 -o build/js/app.min.js build/app.js.temp && rm -f build/app.js.temp", "jade": "jade --out build/ src/jade/index.jade", "build": "npm run less && npm run uglify && npm run jade", "start": "npm run build", "watch": "supervisor --watch src--extensions less,js,jade --no-restart-on exit --exec npm -- run build" }, "repository": "", "author": "Sergei Z.", "dependencies": { }, "devDependencies": { "supervisor": "*", "jshint": "~1.1.0", "less": "~1.3.3", "jade": "*", "uglify-js2": "*" } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

lessスクリプトは、cssのsrc / lessフォルダーからlessをコンパイルし、build / cssフォルダーに入れます

uglify-js2スクリプトは、libフォルダーのライブラリを含むsrcフォルダーのすべてのjsコードを最小化し、build / jsフォルダーに配置します

jadeスクリプトはsrc / jadeフォルダーからhtmlをコンパイルし、ビルドに配置します

一度に1つのRun、less、uglify、およびjadeスクリプトを実行します

ビルドのエイリアスを開始

watchはスーパバイザを起動し、srcディレクトリを調べ、拡張子がless、js、jadeのファイルを変更するときにビルドスクリプトを実行します





npm run％commandname％コマンドを使用して、任意のスクリプトを実行できます。 たとえば、npm run build。 たとえば、npm run buildでプロジェクトをビルドするか、npm run watchでディレクトリを監視し、ファイルが変更された場合に再構築します。

NPMおよびTDD \ BDD

私は自分のプロジェクトにテストを使用しているので、MochaとPhantomJSをねじ込んでコードをテストしました。 これの由来はここで見ることができます

IDE統合

なぜなら NPMはコマンドラインを使用するため、NPMとIDEの統合は非常に簡単なタスクになります。 たとえば、Sublime Text 2のShell Turtlestein拡張機能を使用すると、IDEからコマンドを実行し、IDEから直接コマンドの出力を監視できます。

おわりに

Node.JSはフロントエンド開発のための優れたツールキットを提供し、小規模なプロジェクトがあり、コマンドラインから管理できる場合はうまく機能しますが、高度なプロジェクト管理が必要な場合は十分な柔軟性がありません。 この場合、Gruntを見るのが最善です。