プロジェクトの若さ、プラグインの不足、小さなコミュニティに驚かされるかもしれません。 しかし、そうではありません。プロジェクトが活発に開発されている現在、人気のあるツールのタスクに十分な数のプラグインが作成されています。 現時点では、165のプラグインがあります。それらはここで確認できます 。
この記事はより実践的なものであり、JadeとStylusを使用してフロントエンド開発環境を収集し、ローカルサーバーを起動してLivereloadに接続します。 プロジェクトをGithubに投稿し、実験しました。
Gulpインストール
Node.JSとnpmがインストールされている必要があります。
プロジェクトディレクトリを作成し、ディレクトリ構造を作成して、Gulpと必要なプラグインをインストールします。
プロジェクト構造：
|--/assets // |--|--/template |--|--/stylus |--|--/js |--|--/img |--/build // |--/public // |--package.json |--gulpfile.js
インストール：
$ mkdir assets public build assets/js assets/img assets/stylus assets/template $ touch gulpfile.js $ sudo npm install gulp -g $ npm init $ npm install gulp gulp-jade gulp-stylus gulp-livereload gulp-myth gulp-csso gulp-imagemin gulp-uglify gulp-concat connect --save-dev
プロジェクトのルートに設定ファイルgulpfile.jsがあり、編集します。
プラグインの初期化：
var lr = require('tiny-lr'), // livereload gulp = require('gulp'), // Gulp JS jade = require('gulp-jade'), // Jade stylus = require('gulp-stylus'), // Stylus livereload = require('gulp-livereload'), // Livereload Gulp myth = require('gulp-myth'), // Myth - http://www.myth.io/ csso = require('gulp-csso'), // CSS imagemin = require('gulp-imagemin'), // uglify = require('gulp-uglify'), // JS concat = require('gulp-concat'), // connect = require('connect'), // Webserver server = lr();
タスク：
最初のタスクを作成します
// Stylus gulp.task('stylus', function() { gulp.src('./assets/stylus/screen.styl') .pipe(stylus({ use: ['nib'] })) // stylus .on('error', console.log) // , .pipe(myth()) // - http://www.myth.io/ .pipe(gulp.dest('./public/css/')) // css .pipe(livereload(server)); // css });
Gulpでは、ストリームを操作するため、gulp.srcからデータを取得し、ストリームごとに処理します。
また、Jade、画像、JSを処理するタスクを作成します
// html Jade gulp.task('jade', function() { gulp.src(['./assets/template/*.jade', '!./assets/template/_*.jade']) .pipe(jade({ pretty: true })) // Jade ./assets/template/ _* .on('error', console.log) // , .pipe(gulp.dest('./public/')) // .pipe(livereload(server)); // }); // JS gulp.task('js', function() { gulp.src(['./assets/js/**/*.js', '!./assets/js/vendor/**/*.js']) .pipe(concat('index.js')) // JS, ./assets/js/vendor/** .pipe(gulp.dest('./public/js')) .pipe(livereload(server)); // }); // gulp.task('images', function() { gulp.src('./assets/img/**/*') .pipe(imagemin()) .pipe(gulp.dest('./public/img')) });
快適な開発のために、ローカルサーバーを作成する
// gulp.task('http-server', function() { connect() .use(require('connect-livereload')()) .use(connect.static('./public')) .listen('9000'); console.log('Server listening on http://localhost:9000'); });
上記で必要なタスクは開発用に設計されています。もちろん、ファイルの変更を追跡し、サーバーにLivereloadを追加します。
これを行うには、タスク「ウォッチ」を作成します。
// gulp watch gulp.task('watch', function() { // gulp.run('stylus'); gulp.run('jade'); gulp.run('images'); gulp.run('js'); // Livereload server.listen(35729, function(err) { if (err) return console.log(err); gulp.watch('assets/stylus/**/*.styl', function() { gulp.run('stylus'); }); gulp.watch('assets/template/**/*.jade', function() { gulp.run('jade'); }); gulp.watch('assets/img/**/*', function() { gulp.run('images'); }); gulp.watch('assets/js/**/*', function() { gulp.run('js'); }); }); gulp.run('http-server'); });
これで、プロジェクトを実行して、何が起こったのかを確認できます。
$ gulp watch
サーバーはlocalhost：9000で利用可能です。LivereloadでStylusとJadeを使用するプロジェクトのWeb開発のための環境を作成しました。 次に、最適化されたプロジェクトをビルドする必要があります。 これを行うには、「ビルド」タスクを作成します
プロジェクトの組み立て
gulp.task('build', function() { // css gulp.src('./assets/stylus/screen.styl') .pipe(stylus({ use: ['nib'] })) // stylus .pipe(myth()) // - http://www.myth.io/ .pipe(csso()) // css .pipe(gulp.dest('./build/css/')) // css // jade gulp.src(['./assets/template/*.jade', '!./assets/template/_*.jade']) .pipe(jade()) .pipe(gulp.dest('./build/')) // js gulp.src(['./assets/js/**/*.js', '!./assets/js/vendor/**/*.js']) .pipe(concat('index.js')) .pipe(uglify()) .pipe(gulp.dest('./build/js')); // image gulp.src('./assets/img/**/*') .pipe(imagemin()) .pipe(gulp.dest('./build/img')) });
ビルドフォルダーで完成したプロジェクトを開始して取得します
$ gulp build
GulpJSを試して、プロジェクトで既に非常に高速なものを使い始めてください。