So verwenden Sie gulp, das auf Node.js basierende JavaScript-Projekterstellungstool

In diesem Artikel wird hauptsächlich die Verwendung des auf Node.js basierenden JavaScript-Projektkonstruktionstools vorgestellt. Jetzt kann ich es mit Ihnen teilen.

Vielleicht Wenn Sie Grunt verwendet haben, sind Sie mit Amway Gulp vertraut. Werfen wir einen Blick auf das Tutorial zur Verwendung von Gulp, einem auf Node.js basierenden JavaScript-Projektkonstruktionstool

npm install gulp --save-dev

Was ist Gulp?
gulp ist eine neue Generation von Front-End-Projekterstellungstools. Sie können gulp und seine Plug-Ins verwenden, um Ihren Projektcode (less, sass) zu kompilieren, Ihren JS- und CSS-Code zu komprimieren und sogar Ihren Für Bilder verfügt gulp nur über eine geringe API-Menge und ist daher sehr einfach zu erlernen. Gulp verwendet die Stream-Methode, um Inhalte zu verarbeiten. Node hat eine Reihe von Automatisierungstools hervorgebracht, wie Bower, Yeoman, Grunt usw.

Ähnlichkeiten und Unterschiede zwischen gulp und grunt
Einfach zu bedienen: Durch die Verwendung einer Code-over-Configuration-Strategie hält Gulp einfache Dinge einfach und komplexe Aufgaben beherrschbar.
Effizient: Durch die Nutzung der leistungsstarken Streams von Node.js müssen keine Zwischendateien auf die Festplatte geschrieben werden, sodass der Build schneller abgeschlossen werden kann.
Hohe Qualität: Die strengen Plugin-Richtlinien von Gulp stellen sicher, dass Plugins einfach sind und so funktionieren, wie Sie es erwarten.
Einfach zu erlernen: Durch die Reduzierung der API auf ein Minimum können Sie Gulp in kurzer Zeit erlernen. Der Aufbau funktioniert genau so, wie Sie es sich vorstellen: eine Reihe von Streaming-Pipes.
Da gulp in node.js geschrieben ist, müssen Sie npm auf Ihrem Terminal installieren. npm ist der Paketmanager für node.js, also installieren Sie node.js zuerst auf Ihrem Computer.

gulp-Installationsbefehl

sudo npm install -g gulp

Erstellen Sie eine neue package.json-Datei im Stammverzeichnis

npm init .

Installieren Sie das gulp-Paket

Geben Sie nach der Installation erneut gulp -v ein, um die Versionsnummer zu überprüfen. Wenn das folgende Bild Erfolg zeigt:

Installieren Sie die Plug-in
Gängige Plug-ins installieren:

Sass-Kompilierung (gulp-ruby-sass)
CSS-Präfix automatisch hinzufügen (gulp-autoprefixer)
CSS komprimieren (gulp-ruby-sass) minify- css)
JS-Code-Überprüfung (gulp-jshint)
JS-Dateien zusammenführen (gulp-concat)
JS-Code komprimieren (gulp-uglify)
Bilder komprimieren （gulp-imagemin）
Seite automatisch aktualisieren (gulp-livereload)
Bildcache, nur komprimiert, wenn das Bild ersetzt wird (gulp-cache)
Erinnerung ändern (gulp-notify)
Dateien löschen (del)
Zur Installation Für diese Plug-Ins müssen Sie den folgenden Befehl ausführen:

$ 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文件的步骤。

rrree

Modul und Versionsnummer automatisch zum Abschnitt „Abhängigkeiten“ hinzufügen

npm install module-name -save

Modul und Versionsnummer automatisch zum Abschnitt „Abhängigkeiten“ hinzufügen
gulp-Befehl
Sie müssen nur 5 wissen. Ein gulp-Befehl

gulp.task(name[, deps], fn) definiert den Aufgabennamen: Aufgabenname deps: abhängig Aufgabenname fn: Rückruffunktion

gulp.run(tasks...): Führe so viele Aufgaben wie möglich parallel aus

gulp.watch(glob, fn): Wenn der Inhalt von glob Änderungen, fn ausführen

gulp.src(glob): Nach Bedarf festlegen Der Pfad der zu verarbeitenden Datei kann aus mehreren Dateien in Form eines Arrays oder einem regulären

gulp.dest(path[, Optionen]): Legen Sie den Pfad der generierten Datei fest

glob: kann ein direkter Dateipfad sein. Was es bedeutet, ist Mustervergleich.
gulp leitet die zu verarbeitenden Dateien über die Pipeline-API (pipe()) an entsprechende Plug-Ins weiter. Führen Sie Dateiverarbeitungsaufgaben über Plug-Ins aus.

npm install module-name -save-dev

gulp.task Diese API wird zum Erstellen von Aufgaben verwendet. Sie können $gulp [Standard] in der Befehlszeile eingeben (Klammern bedeuten optional), um die oben genannten Aufgaben auszuführen.

offizielle gulp-API-Dokumentation: https://github.com/gulpjs/gulp/blob/master/docs/API.md

Gulp-Plug-in-Sammlung: http://gulpjs. com/plugins/

Beginnen Sie mit dem Erstellen des Projekts
Erstellen Sie eine neue gulpfile.js-Datei im Stammverzeichnis des Projekts und fügen Sie den folgenden Code ein:

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

Hinweis: Der Name von Die Datei gulpfile.js kann nicht geändert werden.

Das Projekt muss Uglify verwenden und Plug-Ins umbenennen. Führen Sie zur Installation den folgenden Befehl aus:

//在项目根目录引入gulp和uglify插件
var gulp = require('gulp');
var uglify = require('gulp-uglify');

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

Nehmen Sie als Beispiel mein Projekt und geben Sie das Verzeichnis ein, in dem sich gulpfile.js befindet:

npm install --save-dev gulp-uglify
npm install --save-dev gulp-rename

und geben Sie dann ein:

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优化配置缩小文件搜索范围的介绍

Das obige ist der detaillierte Inhalt vonSo verwenden Sie gulp, das auf Node.js basierende JavaScript-Projekterstellungstool. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!