Gulp †SCSS や minify などを行うWebクライアント(js、cssなど) 用のビルドツール。
インストール †Node.js インストール †https://nodejs.org/ から node.js をインストール gulp をグローバルインストール †sudo npm install gulp -g プロジェクト用ディレクトリを作成し移動 †mkdir example_gulp cd example_gulp package.json の作成 †npm init ※聞かれる質問は全部 [Enter] 押下でも良い。 プロジェクトフォルダに gulp をインストール †npm install gulp --save-dev ※インストールが成功すると配下に node_modules フォルダが出来る。 必要なプラグインのインストール †必要なプラグインを個別にインストールする npm install gulp-uglify --save-dev npm install gulp-jshint --save-dev npm install gulp-minify-css --save-dev npm install gulp-csslint --save-dev npm install gulp-concat --save-dev
gulpfile.js の作成 †Grunt の設定ファイルがJSON形式で記述されるのに対して、gulpfile.js は スクリプトを記述する。 例) css、js の監視 及び minify †var gulp = require('gulp'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var minify = require('gulp-minify-css'); // cssのminify を行うタスク gulp.task('minify-css', function() { gulp.src(["css/*.css", "!css/*.min.css"]) // 配列で複数のディレクトリ等を指定可、頭に!を付けて除外するファイルを指定可 .pipe(concat('css/css-all.min.css')) .pipe(minify()) .pipe(gulp.dest("./")); }); // jsのuglify を行うタスク gulp.task('uglify', function() { gulp.src(["js/*.js", "js2/*.js", "!js/*.min.js"]) .pipe(concat('js/js-all.min.js')) .pipe(uglify()) .pipe(gulp.dest("./")); }); // ファイル監視のタスク gulp.task('watch', function(){ gulp.watch('./css/*.css', ['minify-css']); gulp.watch('./js/*.js', ['uglify']); gulp.watch('./js2/*.js', ['uglify']); }); // デフォルトタスクの指定 //gulp.task('default', ['minify-css','uglify']); gulp.task('default', ['watch']); 実行順序の制御 †var runSequence = require('run-sequence'); gulp.task('sequence_task', function() { runSequence('task1', ['task2A', 'task2B'], 'task3'); }); 上記の例だと、実行順序は以下の通りとなる。 実行方法 † |