先端自動化構築ツールGunt
6128 ワード
一、Gurrntを理解する
Grountはタスクに基づくJavaScriptプロジェクト命令ライン構築ツールです.GrountとGrountプラグインはnpmでインストールして管理しています.npmはNode.jsのパッケージマネージャです.Grantを知る前に、まず二つのことを準備します.1、npmを知る:npmはNodeJSパッケージ管理と配信ツールで、すでに非公式のリリースNodeモジュールの標準になりました.2、nodeをインストールする:nodejs公式サイトに入る(https://nodejs.org/)INSTALLをクリックしてnodeインストールパッケージをダウンロードし、デフォルトでインストールします.インストールが完了したら、対応ディレクトリに入ると、nodejsフォルダの下にnpmがあり、直接npmで相環境をインストールすることができます.
二、グランドを取り付ける
Gunt公式サイトを参照してくださいhttp://www.gruntjs.net/Guntをインストールします.npm install-g grunt-cliはGuntをインストールしたのと同じではありません.Gunt CLIのタスクは簡単です.Guntfileと同じディレクトリのGuntを呼び出します.このようなメリットは、同じシステムに複数のバージョンのGrauntを同時にインストールすることができます.
三、簡単で実用的なGunt
新しいGranctプロジェクトは、ルートディレクトリの下に二つのファイルが必要です.package.jsonとGuntfile.js package.json:このファイルはnpmによってプロジェクトのメタデータを記憶するために使用され、このプロジェクトをnpmモジュールとして発表します.このファイルにはプロジェクト依存のgruntとGuntプラグインを一覧表示して、devDependenciesの設定セグメントに配置してもいいです.Guntfile:このファイルはGuntfile.jsまたはGuntfile.co.ffeeと名付けられており、タスクを設定または定義し、Guntプラグインをロードするために使用されます.1.npm initコマンドは基本的なpackage.jsonファイルを作成します.または手動で作成します.
既に存在しているpackage.jsonファイルにGrountとgruntプラグインを追加する一番簡単な方法は以下の通りです.
npm install--save-dev.このコマンドはだけでなく、devDependenciesプロファイルに自動的に追加されます.
3.grunt--helpコマンドは、すべての利用可能なタスクを一覧表示します.
四、簡単なプロジェクトフローの例
ワークエリア->copyソースファイルを空でコンパイルしてワークエリア->マージファイル->圧縮ファイル->タイムスタンプclean->copy->concat->min->md 5にします. 1.grunt-contrib-clean:Clear files and folders.2.grunt-contrib-copy:Copy files.3.grunt-contrib-concat:Concatent files.4.grunt-contrib-cmin:Copress.Comples.CSfiles. grunt-contrib-glify:Minify files with UglifyJS. grunt-contrib-htmlmin:Minify HTML.5.grunt-filerev:Static ast revisioning through file content hash第一歩:package.jsonを作成する
nodejs公式サイトの住所:https://nodejs.org/grunt中国語公式サイトの住所:http://www.gruntjs.net/grunt公式プラグインのアドレス:https://github.com/gruntjs 六、ソース/package.json
2. プラグイン名は、最外層を除き、中間層の名前をカスタマイズできます.
Grountはタスクに基づくJavaScriptプロジェクト命令ライン構築ツールです.GrountとGrountプラグインはnpmでインストールして管理しています.npmはNode.jsのパッケージマネージャです.Grantを知る前に、まず二つのことを準備します.1、npmを知る:npmはNodeJSパッケージ管理と配信ツールで、すでに非公式のリリースNodeモジュールの標準になりました.2、nodeをインストールする:nodejs公式サイトに入る(https://nodejs.org/)INSTALLをクリックしてnodeインストールパッケージをダウンロードし、デフォルトでインストールします.インストールが完了したら、対応ディレクトリに入ると、nodejsフォルダの下にnpmがあり、直接npmで相環境をインストールすることができます.
二、グランドを取り付ける
Gunt公式サイトを参照してくださいhttp://www.gruntjs.net/Guntをインストールします.npm install-g grunt-cliはGuntをインストールしたのと同じではありません.Gunt CLIのタスクは簡単です.Guntfileと同じディレクトリのGuntを呼び出します.このようなメリットは、同じシステムに複数のバージョンのGrauntを同時にインストールすることができます.
三、簡単で実用的なGunt
新しいGranctプロジェクトは、ルートディレクトリの下に二つのファイルが必要です.package.jsonとGuntfile.js package.json:このファイルはnpmによってプロジェクトのメタデータを記憶するために使用され、このプロジェクトをnpmモジュールとして発表します.このファイルにはプロジェクト依存のgruntとGuntプラグインを一覧表示して、devDependenciesの設定セグメントに配置してもいいです.Guntfile:このファイルはGuntfile.jsまたはGuntfile.co.ffeeと名付けられており、タスクを設定または定義し、Guntプラグインをロードするために使用されます.1.npm initコマンドは基本的なpackage.jsonファイルを作成します.または手動で作成します.
{
"name": "my-project-name",
"description":"test grunt ...",
"version": "0.1.0"
}
2.GuntとGuntプラグインをインストールする(https://github.com/gruntjs)既に存在しているpackage.jsonファイルにGrountとgruntプラグインを追加する一番簡単な方法は以下の通りです.
npm install
3.grunt--helpコマンドは、すべての利用可能なタスクを一覧表示します.
四、簡単なプロジェクトフローの例
ワークエリア->copyソースファイルを空でコンパイルしてワークエリア->マージファイル->圧縮ファイル->タイムスタンプclean->copy->concat->min->md 5にします. 1.grunt-contrib-clean:Clear files and folders.2.grunt-contrib-copy:Copy files.3.grunt-contrib-concat:Concatent files.4.grunt-contrib-cmin:Copress.Comples.CSfiles. grunt-contrib-glify:Minify files with UglifyJS. grunt-contrib-htmlmin:Minify HTML.5.grunt-filerev:Static ast revisioning through file content hash第一歩:package.jsonを作成する
{
"name":"test_grunt",
"description":"test grunt ...",
"version":"0.0.1"
}
第二ステップ:対応プラグインのインストール(加えて--save-dev、package.jsonにdevDependencies依存)npm install grunt-contrib-clean --save-dev
npm install grunt-contrib-copy --save-dev
npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-cssmin --save-dev
npm install grunt-contrib-uglify --save-dev
第3ステップ:Guntfile.jsを作成し、プラグインの設定を使用することを追加します.'use strict';
module.exports = function(grunt) {
//
grunt.initConfig({
//
});
//
grunt.loadNpmTasks('grunt-contrib-clean');
//
grunt.registerTask('default', ['clean']);
}
五、住所nodejs公式サイトの住所:https://nodejs.org/grunt中国語公式サイトの住所:http://www.gruntjs.net/grunt公式プラグインのアドレス:https://github.com/gruntjs 六、ソース/package.json
{
"name": "test_grunt",
"description": "test grunt ...",
"version": "0.0.1",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-clean": "^0.6.0",
"grunt-contrib-concat": "^0.5.1",
"grunt-contrib-copy": "^0.8.0",
"grunt-contrib-cssmin": "^0.12.3",
"grunt-contrib-uglify": "^0.9.1"
}
}
/Guntfile.js'use strict';
module.exports = function(grunt) {
//
grunt.initConfig({
/* */
pkg: grunt.file.readJSON('package.json'),
dirs: {
src: 'path',
dest: 'dest/<%= pkg.name %>/<%= pkg.version %>',
},
// clean ( dest/test_grunt/0.0.1 min )
clean: {
js: ["<%= dirs.dest %>/*.js", "!<%= dirs.dest %>/*.min.js"],
css: ["<%= dirs.dest %>/*.css", "!<%= dirs.dest %>/*.min.css"]
},
// copy ( path dest )
copy: {
main: {
files: [
// includes files within path
{expand: true, src: ['path/*'], dest: '<%= dirs.dest %>/', filter: 'isFile'},
]
}
},
// concat ( dest a.js b.js built.js)
concat: {
options: {
separator: '
',
},
concatCSS: {
src: ['<%= dirs.dest %>/a.css', '<%= dirs.dest %>/path/b.css'],
dest: '<%= dirs.dest %>/built.css',
},
concatJS: {
src: ['<%= dirs.dest %>/a.js', '<%= dirs.dest %>/b.js'],
dest: '<%= dirs.dest %>/built.js',
}
},
// cssmin ( css)
cssmin: {
target: {
files: [{
expand: true,
cwd: '<%= dirs.dest %>',
src: ['*.css', '!*.min.css'],
dest: '<%= dirs.dest %>',
ext: '.min.css'
}]
}
},
// uglify ( js)
uglify: {
options: {
mangle: {
except: ['jQuery', 'Backbone']
}
},
my_target: {
files: {
'<%= dirs.dest %>/bulit.min.js': ['<%= dirs.dest %>/*.js']
}
}
}
});
//
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
//
grunt.registerTask('cls', ['clean']);
grunt.registerTask('cpy', ['copy']);
grunt.registerTask('con', ['concat']);
grunt.registerTask('cmpCSS', ['cssmin']);
grunt.registerTask('cmpJS', ['uglify']);
grunt.registerTask('default', ['copy','concat','cssmin','uglify','clean']);
}
PS:1. 自分で設定したジョブ名は、プラグイン名と同じではなく、無限ループを引き起こします.2. プラグイン名は、最外層を除き、中間層の名前をカスタマイズできます.