Node.js ベースの JavaScript プロジェクト構築ツール gulp の使用方法

この記事では、Node.js をベースにした JavaScript プロジェクト構築ツール gulp の使用方法を主に紹介します。必要な友達は参考にしてください。 Amway gulp に来た方ならよくご存知かと思いますが、Node.js ベースの JavaScript プロジェクト構築ツール gulp の使い方チュートリアルを見てみましょう

npm install gulp --save-dev

gulp とは何ですか?

gulp は、新世代のフロントエンド プロジェクト構築ツールです。gulp とそのプラグインを使用して、プロジェクト コード (less、sass) をコンパイルし、js および css コードを圧縮し、gulp のみを圧縮することもできます。 API の量が少ないため、習得が非常に簡単です。 Gulp はストリーム メソッドを使用してコンテンツを処理します。 Node は、Bower、Yeoman、Grunt などの多くの自動化ツールを生み出しました。

gulp と grunt の類似点と相違点

使いやすさ: コードオーバー構成戦略を採用する Gulp は、単純なことは単純に、複雑なタスクは管理しやすくします。
効率: Node.js の強力なストリームを利用することで、中間ファイルをディスクに書き込む必要がなく、ビルドをより速く完了できます。 高品質: Gulp の厳格なプラグイン ガイドラインにより、プラグインがシンプルで期待どおりに動作することが保証されます。
学習が簡単: API を最小限に抑えることで、短時間で Gulp を学習できます。ビルドは想像どおり、一連のストリーミング パイプとして機能します。
gulpはnode.jsで書かれているため、端末にnpmをインストールする必要があります。 npmはnode.jsのパッケージマネージャーなので、最初にnode.jsをマシンにインストールします。

gulpインストールコマンド

sudo npm install -g gulp

ルートディレクトリに新しいpackage.jsonファイルを作成します

npm init .

gulpパッケージをインストールします

以下の図の場合、gulp -vを入力してバージョン番号を確認します。成功を示します:

プラグインをインストールします

共通プラグインをインストールします:
sassコンパイル (gulp-ruby-sass)

CSSプレフィックスを自動的に追加します (gulp-autoprefixer)

cssを圧縮します (gulp-minify) -css)
js コードの検証 (gulp-jshint)
js ファイルの統合 (gulp-concat)
js コードの圧縮 (gulp-uglify)
画像の圧縮 (gulp-imagemin)
ページの自動更新 (gulp-livereload)
画像キャッシュ、置換後の圧縮画像のみ (gulp-cache)
変更リマインダー (gulp-notify) using using using using using using 's' 's 's' through using 's ‐ ‐ ‐‐ ‐‐‐バージョン番号に devdependency セクションに追加

gulp コマンド

知っておく必要があるのは 5 つの gulp コマンドのみ

gulp.task(name[, deps], fn) タスク名を定義します: タスク名 deps:依存タスク名 fn: コールバック関数

gulp.run(tasks...): できるだけ多くのタスクを並列実行
gulp.watch(glob, fn): globの内容が変わったらfn
gulpを実行.src(glob): 必要に応じて設定します 処理されるファイルのパスは、配列形式の複数のファイルにすることも、通常の

gulp.dest(path[, options]): パスを設定することもできます生成されたファイルへの

glob: 直接ファイル パスにすることができます。それはパターンマッチングを意味します。

gulp は、パイプライン (pipe()) API を通じて、処理されるファイルを関連プラグインに指示します。プラグインを通じてファイル処理タスクを実行します。

$ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev-save和-save-dev可以省掉你手动修改package.json文件的步骤。

gulp.task この API は、コマンド ラインで $gulp [default] と入力して (括弧はオプションを示します) タスクを作成するために使用され、上記のタスクを実行できます。

gulp 公式 API ドキュメント: https://github.com/gulpjs/gulp/blob/master/docs/API.md

gulp プラグイン: http://gulpjs.com/plugins/

project

プロジェクトのルート ディレクトリに新しい gulpfile.js ファイルを作成し、次のコードを貼り付けます:

npm install module-name -save

注: gulpfile.js ファイル名は変更できません。

プロジェクトでは uglify を使用し、プラグインの名前を変更する必要があります。次のコマンドを実行してインストールします:

npm install module-name -save-dev

私のものを例として、gulpfile.js があるディレクトリを入力します:

gulp.task('default', function () {...});

次に次を入力します:

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

gulp.task('compress',function(){
  return gulp.src('script/*.js')
  .pipe(uglify())
  .pipe(rename('jquery.ui.min.js'))
  .pipe(gulp.dest('dist'));
});

该命令会安装package.json下的全部依赖，如下图所示：

完整的gulpfile.js

// 载入外挂
var gulp = require('gulp'), 
  sass = require('gulp-ruby-sass'),
  autoprefixer = require('gulp-autoprefixer'),
  minifycss = require('gulp-minify-css'),
  jshint = require('gulp-jshint'),
  uglify = require('gulp-uglify'),
  imagemin = require('gulp-imagemin'),
  rename = require('gulp-rename'),
  clean = require('gulp-clean'),
  concat = require('gulp-concat'),
  notify = require('gulp-notify'),
  cache = require('gulp-cache'),
  livereload = require('gulp-livereload');
 
// 样式
gulp.task('styles', function() { 
 return gulp.src('src/styles/main.scss')
  .pipe(sass({ style: 'expanded', }))
  .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
  .pipe(gulp.dest('dist/styles'))
  .pipe(rename({ suffix: '.min' }))
  .pipe(minifycss())
  .pipe(gulp.dest('dist/styles'))
  .pipe(notify({ message: 'Styles task complete' }));
});
 
// 脚本
gulp.task('scripts', function() { 
 return gulp.src('src/scripts/**/*.js')
  .pipe(jshint('.jshintrc'))
  .pipe(jshint.reporter('default'))
  .pipe(concat('main.js'))
  .pipe(gulp.dest('dist/scripts'))
  .pipe(rename({ suffix: '.min' }))
  .pipe(uglify())
  .pipe(gulp.dest('dist/scripts'))
  .pipe(notify({ message: 'Scripts task complete' }));
});
 
// 图片
gulp.task('images', function() { 
 return gulp.src('src/images/**/*')
  .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
  .pipe(gulp.dest('dist/images'))
  .pipe(notify({ message: 'Images task complete' }));
});
 
// 清理
gulp.task('clean', function() { 
 return gulp.src(['dist/styles', 'dist/scripts', 'dist/images'], {read: false})
  .pipe(clean());
});
 
// 预设任务
gulp.task('default', ['clean'], function() { 
  gulp.start('styles', 'scripts', 'images');
});
 
// 看守
gulp.task('watch', function() {
 
 // 看守所有.scss档
 gulp.watch('src/styles/**/*.scss', ['styles']);
 
 // 看守所有.js档
 gulp.watch('src/scripts/**/*.js', ['scripts']);
 
 // 看守所有图片档
 gulp.watch('src/images/**/*', ['images']);
 
 // 建立即时重整伺服器
 var server = livereload();
 
 // 看守所有位在 dist/ 目录下的档案，一旦有更动，便进行重整
 gulp.watch(['dist/**']).on('change', function(file) {
  server.changed(file.path);
 });
 
});

注：pipe()是stream模块里传递数据流的一个方法，第一个参数为插件方法，插件会接收从上游流下的文件，进行处理加工后，再往下流。

gulp.task('任务名称', function () {
  return gulp.src('文件路径')
    .pipe(...)
    .pipe(...)
    // 直到任务的最后一步
    .pipe(...);
});

gulp插件
gulp-gh-pages：使用gulp来把markdown生成html文档并上传到git pages上
https://github.com/shinnn/gulp-gh-pages

var gulp = require('gulp');

var ghPages = require('gulp-gh-pages');



gulp.task('deploy', function() {

 return gulp.src('./dist/**/*')

  .pipe(ghPages());

});

gulp-jade插件：将jade编译成html文件
gulp-less插件：将less编译成css文件

var less = require('gulp-less');

var path = require('path');

 

gulp.task('less', function () {

 return gulp.src('./less/**/*.less')

  .pipe(less({

   paths: [ path.join(__dirname, 'less', 'includes') ]

  }))

  .pipe(gulp.dest('./public/css'));

});
gulp-live-server 插件：方便的，轻量级的服务器

var gulp = require('gulp');

 var gls = require('gulp-live-server');

 gulp.task('serve', function() {

 //1. serve with default settings

 var server = gls.static(); //equals to gls.static('public', 3000);

 server.start();



 //2. serve at custom port

 var server = gls.static('dist', 8888);

 server.start();



 //3. serve multi folders

 var server = gls.static(['dist', '.tmp']);

 server.start();



 //use gulp.watch to trigger server actions(notify, start or stop)

 gulp.watch(['static/**/*.css', 'static/**/*.html'], function (file) {

  server.notify.apply(server, [file]);

 });

});

gulp-livereload，可以实时保存刷新，那样就不用按F5和切换界面了
gulp-load-plugins：在你的package.json文件中自动加载任意的gulp插件

$ npm install --save-dev gulp-load-plugins

例如一个给定的package.json文件如下：

{

  "dependencies": {

    "gulp-jshint": "*",

    "gulp-concat": "*"

  }

}

在gulpfile.js中添加如下代码：

var gulp = require('gulp');

var gulpLoadPlugins = require('gulp-load-plugins');

var plugins = gulpLoadPlugins();
plugins.jshint = require('gulp-jshint');

plugins.concat = require('gulp-concat');

gulp-babel：gulp 的babel插件，

$ npm install --save-dev gulp-babel babel-preset-es2015

使用方法：

const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('default', () => {
  return gulp.src('src/app.js')
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(gulp.dest('dist'));
});

官方github： https://github.com/gulpjs/gulp

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

Node.js中如何合并两个复杂对象的介绍

关于Node.js 子进程与应用的介绍

Webpack优化配置缩小文件搜索范围的介绍

以上がNode.js ベースの JavaScript プロジェクト構築ツール gulp の使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。