Gulp praktische Konfiguration (2) – kleine und mittlere Projekte

Die Gulp-Konfiguration im vorherigen Artikel ist sehr einfach und dient hauptsächlich der Demo-Anzeige und dem Debuggen. Dieser Artikel wird relativ detailliert sein, einschließlich Komprimierung, Zusammenführung und Zeitstempel.

In Städten mit relativ guten Internetumgebungen sollten größere Projekte, die die Zusammenarbeit mehrerer Personen erfordern, alle Modularität verwenden (hier bezieht sich hauptsächlich auf CommonJS- und ES6-Modulsysteme, nicht auf die früheren Require.js und Sea.js). Der Code wird sich auch mehr auf das Trennen und Injizieren als auf das bloße Zusammenführen konzentrieren.

Aber in vielen kleinen Unternehmen sind die Entwicklungsmodelle oder -technologien noch relativ traditionell, oder einige kleine Projekte müssen die modernsten Technologien überhaupt nicht nutzen.

Diese Konfiguration ist also hauptsächlich für kleine und mittlere Projekte wie dieses gedacht.

1. Erforderliche Tools und Versionen

Paketverwaltungstool: Garn v0.24.5

Automatisiertes Build-Tool: gulp v4.0

2. Werkzeuginstallation

Garn fügt globale gulpjs/gulp#4.0 hinzu

3. Konfiguration der Entwicklungsumgebung

<span style="color: #0000ff">var</span> gulp = require('gulp'<span style="color: #000000">),
    pug </span>= require('gulp-pug'<span style="color: #000000">),
    less </span>= require('gulp-less'<span style="color: #000000">),
    </span><span style="color: #008000">//</span><span style="color: #008000">当发生异常时提示错误 确保本地安装gulp-notify和gulp-plumber</span>
    notify = require('gulp-notify'<span style="color: #000000">),
    plumber </span>= require('gulp-plumber'<span style="color: #000000">),
    sourcemaps </span>= require('gulp-sourcemaps'<span style="color: #000000">),
    browserSync </span>= require('browser-sync'<span style="color: #000000">).create()
    reload </span>=<span style="color: #000000"> browserSync.reload;

</span><span style="color: #0000ff">var</span> LessAutoprefix = require('less-plugin-autoprefix'<span style="color: #000000">),
    autoprefix </span>= <span style="color: #0000ff">new</span> LessAutoprefix({ browsers: ['last 2 versions'<span style="color: #000000">] });

</span><span style="color: #008000">//</span><span style="color: #008000"> 文件路径</span>
<span style="color: #0000ff">var</span> paths =<span style="color: #000000"> {
  pug: {
    src: </span>'src/pug/pages/*.pug'<span style="color: #000000">,
    dest: </span>'dev/html/'<span style="color: #000000">,
    watch: </span>'src/pug/**/*.pug'<span style="color: #000000">
  },
  less: {
    src: </span>'src/less/**/*.less'<span style="color: #000000">,
    dest: </span>'dev/css/'<span style="color: #000000">,
    watch: </span>'src/less/**/*.less'<span style="color: #000000">
  },
  js: {
    src: </span>'src/js/**/*.js'<span style="color: #000000">,
    dest: </span>'dev/js/'<span style="color: #000000">,
    watch: </span>'src/js/**/*.js'<span style="color: #000000">
  },
  img: {
    src: </span>'src/img/**/*'<span style="color: #000000">,
    dest: </span>'dev/img/'<span style="color: #000000">,
    watch: </span>'src/img/**/*'<span style="color: #000000">
  }
}

</span><span style="color: #008000">//</span><span style="color: #008000"> 启动 browserSync 服务，自己启动server，并且为浏览器实时刷新提供服务</span>
gulp.task('browserSync', <span style="color: #0000ff">function</span><span style="color: #000000">() {
  </span><span style="color: #0000ff">return</span><span style="color: #000000"> browserSync.init({
    server: {
      baseDir: </span>'./'<span style="color: #000000">
    },
    files: </span>'./dev/**/*'<span style="color: #000000">
  });
})

</span><span style="color: #008000">//</span><span style="color: #008000"> 将pug文件转换为html</span>
gulp.task('pug', <span style="color: #0000ff">function</span><span style="color: #000000"> buildHTML() {
  </span><span style="color: #0000ff">return</span><span style="color: #000000"> gulp.src(paths.pug.src)
    .pipe(plumber({errorHandler: notify.onError(</span>'Error: <%= error.message %>'<span style="color: #000000">)}))
    .pipe(pug())
    .pipe(gulp.dest(paths.pug.dest));
});

</span><span style="color: #008000">//</span><span style="color: #008000"> 编译less文件</span>
gulp.task('less', <span style="color: #0000ff">function</span><span style="color: #000000">() {
  </span><span style="color: #0000ff">return</span><span style="color: #000000"> gulp.src(paths.less.src)
    .pipe(plumber({errorHandler: notify.onError(</span>'Error: <%= error.message %>'<span style="color: #000000">)}))
    .pipe(sourcemaps.init())
    .pipe(less({
      plugins: [autoprefix]
    }))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(paths.less.dest));
})

</span><span style="color: #008000">//</span><span style="color: #008000"> 复制js文件</span>
gulp.task('js', <span style="color: #0000ff">function</span><span style="color: #000000">() {
  </span><span style="color: #0000ff">return</span><span style="color: #000000"> gulp.src(paths.js.src)
    .pipe(gulp.dest(paths.js.dest));
})

</span><span style="color: #008000">//</span><span style="color: #008000"> 复制img文件</span>
gulp.task('img', <span style="color: #0000ff">function</span><span style="color: #000000">() {
  </span><span style="color: #0000ff">return</span><span style="color: #000000"> gulp.src(paths.img.src)
    .pipe(gulp.dest(paths.img.dest));
})


</span><span style="color: #008000">//</span><span style="color: #008000"> 监听文件变化</span>
gulp.task('watch', <span style="color: #0000ff">function</span><span style="color: #000000">() {
  gulp.watch(paths.pug.watch, gulp.parallel(</span>'pug'<span style="color: #000000">))
  gulp.watch(paths.less.watch, gulp.parallel(</span>'less'<span style="color: #000000">))
  gulp.watch(paths.js.watch, gulp.parallel(</span>'js'<span style="color: #000000">))
  gulp.watch(paths.img.watch, gulp.parallel(</span>'img'<span style="color: #000000">))
})

</span><span style="color: #008000">//</span><span style="color: #008000"> 默认任务，在命令行输入`gulp`来启动任务</span>
gulp.task('default', gulp.parallel('watch', 'browserSync', 'pug', 'less', 'js'))

Das Gulp-Pug-Plug-In wird zum Kompilieren von Pug-Vorlagen verwendet, bei denen es sich um die vorherigen Jade-Vorlagen handelt. Die Pug-Vorlage ist eine sehr leistungsstarke Front-End- und universelle Vorlagen-Engine und für bestimmte Zwecke sehr einfach zu erlernen Verwendung finden Sie in meinem anderen Artikel. Tutorial-Artikel über Mops – Blogsystem basierend auf express+mongodb+pug – Mops-Artikel.

Jeder weiß, dass Gulp bei der Überwachung von Aufgaben unterbrochen wird und die Gulp-Aufgabe neu gestartet werden muss. Hier können Sie zwei Plug-Ins verwenden, gulp-notify und gulp-plumber, um eine Unterbrechung der Gulp-Aufgabe zu vermeiden.

4. Konfiguration der Produktionsumgebung

<span style="color: #0000ff">var</span> gulp = require('gulp'<span style="color: #000000">),
  del </span>= require('del'<span style="color: #000000">),
  pug </span>= require('gulp-pug'<span style="color: #000000">),
  less </span>= require('gulp-less'<span style="color: #000000">),
  cleanCSS </span>= require('gulp-clean-css'<span style="color: #000000">),
  base64 </span>= require('gulp-tobase64'<span style="color: #000000">),
  </span><span style="color: #008000">//</span><span style="color: #008000"> img64 = require('gulp-imgbase64'),</span>
  imagemin = require('gulp-imagemin'<span style="color: #000000">),
  babel </span>= require('gulp-babel'<span style="color: #000000">),
  uglify </span>= require('gulp-uglify'<span style="color: #000000">),
  rev </span>= require('gulp-rev'), <span style="color: #008000">//</span><span style="color: #008000"> 添加时间戳</span>
  revCollector = require('gulp-rev-collector'<span style="color: #000000">);


</span><span style="color: #0000ff">var</span> LessAutoprefix = require('less-plugin-autoprefix'<span style="color: #000000">),
  autoprefix </span>= <span style="color: #0000ff">new</span><span style="color: #000000"> LessAutoprefix({
    browsers: [</span>'last 2 versions'<span style="color: #000000">]
  });

</span><span style="color: #008000">//</span><span style="color: #008000"> 文件路径</span>
<span style="color: #0000ff">var</span> paths =<span style="color: #000000"> {
  pug: {
    src: </span>'src/pug/pages/*.pug'<span style="color: #000000">,
    dest: </span>'dist/html/'<span style="color: #000000">
  },
  less: {
    src: </span>'src/less/main.less'<span style="color: #000000">,
    dest: </span>'dist/css/'<span style="color: #000000">
  },
  js: {
    src: [</span>'src/js/**/*.js', '!src/js/lib/*.js'<span style="color: #000000">],
    dest: </span>'dist/js/'<span style="color: #000000">
  },
  img: {
    src: </span>'src/img/**/*'<span style="color: #000000">,
    dest: </span>'dist/img/'<span style="color: #000000">
  }
};


</span><span style="color: #008000">//</span><span style="color: #008000"> 将pug文件转换为html</span>
gulp.task('pug', <span style="color: #0000ff">function</span><span style="color: #000000">() {
  </span><span style="color: #0000ff">return</span><span style="color: #000000"> gulp.src(paths.pug.src)
    .pipe(pug())
    .pipe(gulp.dest(paths.pug.dest));
});

</span><span style="color: #008000">//</span><span style="color: #008000"> 编译less文件</span>
gulp.task('less', <span style="color: #0000ff">function</span><span style="color: #000000">() {
  </span><span style="color: #0000ff">return</span><span style="color: #000000"> gulp.src(paths.less.src)
    .pipe(less({
      plugins: [autoprefix]
    }))
    .pipe(base64({
      maxsize: </span>8<span style="color: #000000">
    }))
    .pipe(cleanCSS({
      compatibility: </span>'ie8' <span style="color: #008000">//</span><span style="color: #008000"> 兼容性前缀保留</span>
<span style="color: #000000">    }))
    .pipe(rev())
    .pipe(gulp.dest(paths.less.dest))
    .pipe(rev.manifest())
    .pipe(gulp.dest(</span>'rev/css'<span style="color: #000000">))
});

</span><span style="color: #008000">//</span><span style="color: #008000"> 压缩图片</span>
gulp.task('img', <span style="color: #0000ff">function</span><span style="color: #000000">() {
  </span><span style="color: #0000ff">return</span><span style="color: #000000"> gulp.src(paths.img.src)
    .pipe(imagemin({
      optimizationLevel: </span>3<span style="color: #000000">,
      progressive: </span><span style="color: #0000ff">true</span><span style="color: #000000">,
      interlaced: </span><span style="color: #0000ff">true</span><span style="color: #000000">
    }))
    .pipe(gulp.dest(paths.img.dest));
});

</span><span style="color: #008000">//</span><span style="color: #008000"> 编译JS文件</span>
gulp.task('js', <span style="color: #0000ff">function</span><span style="color: #000000">() {
  </span><span style="color: #0000ff">return</span><span style="color: #000000"> gulp.src(paths.js.src)
    .pipe(babel({
      presets: [</span>'es2015'<span style="color: #000000">]
    }))
    .pipe(uglify())
    .pipe(rev())
    .pipe(gulp.dest(paths.js.dest))
    .pipe(rev.manifest())
    .pipe(gulp.dest(</span>'rev/js'<span style="color: #000000">));
});
</span><span style="color: #008000">//</span><span style="color: #008000"> 引用的外部 JS 库，不需要做压缩和打时间戳等处理</span><span style="color: #008000">
//</span><span style="color: #008000"> 所以直接复制就行</span>
gulp.task('copyJs', <span style="color: #0000ff">function</span><span style="color: #000000">() {
  </span><span style="color: #0000ff">return</span> gulp.src('src/js/lib/*.js'<span style="color: #000000">)
    .pipe(gulp.dest(</span>'dist/js/lib/'<span style="color: #000000">))
})

</span><span style="color: #008000">//</span><span style="color: #008000"> 替换加了MD5时间戳的文件</span>
gulp.task('rev', gulp.series(gulp.parallel('img64', 'less', 'js'), <span style="color: #0000ff">function</span><span style="color: #000000">() {
  </span><span style="color: #0000ff">return</span> gulp.src(['rev/**/*.json', 'dist/html/*.html'<span style="color: #000000">])
    .pipe(revCollector({
      replaceReved: </span><span style="color: #0000ff">true</span><span style="color: #000000">
    }))
    .pipe(gulp.dest(paths.pug.dest));
}));
</span><span style="color: #008000">//</span><span style="color: #008000"> Clean 任务执行前，先清除之前生成的文件</span>
gulp.task('clean', <span style="color: #0000ff">function</span><span style="color: #000000">() {
  </span><span style="color: #0000ff">return</span> del('dist/'<span style="color: #000000">)
});

</span><span style="color: #008000">//</span><span style="color: #008000"> 默认任务，在命令行输入`gulp`来启动任务</span>
gulp.task('default', gulp.series('clean', gulp.series('img', gulp.parallel('rev', 'copyJs'))))

In der Produktionsumgebung muss der Code jedes Mal komprimiert und zusammengeführt werden, damit der Benutzerclient den aktualisierten Code jedes Mal herunterladen kann die CSS- und JS-Dateien.

Das gulp-rev-Plugin ist speziell für das Stempeln von Dateien mit MD5 konzipiert. Nach dem MD5-Stempeln müssen natürlich auch die Referenzen in der HTML-Datei geändert werden Eins. Wir benötigen also auch das Plugin gulp-rev-collector, um mit MD5 gestempelte Dateien zu ersetzen.

gulp-imgbase64, dieses Plug-in kann angeben, welche IMG-Elemente in der HTML-Datei in base64 konvertiert werden. Wenn Sie eine personalisiertere Konvertierung benötigen, können Sie dieses Plug-in verwenden.

5. Projektverzeichnisstruktur

XXX——

|. — dist

|. — html

|. — CSS

|. — img

|. — js

|. — lib

　|. — dev

|. — html

|. — CSS

|. — img

|. — js

|. — lib

|. — src

|. — Mops

|. – Komponenten

|. — Seiten

|. — layout.pug

|. — weniger

|. — Seiten

|. — main.less

　　|. — reset.less

|. — common.less

|. — feature.less

|. — img

|. — js

|. — lib

Der Ordner src enthält den Hauptgeschäftscode, der Code enthält, der eine langfristige Wartung erfordert.

Im Dev-Ordner generiert gulp während der Entwicklung Code.

Im Ordner

dist generiert gulp beim Generieren Code.

In dieser Konfiguration habe ich den durch gulp während der Entwicklung generierten Code nicht wie viele andere Leute im src-Ordner abgelegt, da dies viele Referenzprobleme verursachen und den Entwicklungs- und Produktionscode trennen würde , wodurch der src-Ordner ohne unordentlichen Code sauber bleiben kann.

Daher kopiere ich einige Dateien, die nicht von gulp verarbeitet wurden, direkt an den entsprechenden Speicherort im dev- oder dist-Ordner.

Der dist-Ordner wird geleert, bevor jede Gulp-Aufgabe Code generiert, sodass wir uns nicht um den Inhalt des dist-Ordners kümmern müssen.

Der Dev-Ordner enthält möglicherweise viele redundante Dateien, aber wir müssen uns keine Sorgen machen, dass dies Auswirkungen auf uns hat. Es spielt keine Rolle, ob Dateien gelöscht oder überschrieben werden, wir müssen nur sicherstellen, dass die Dateien im src-Ordner sind korrekt.

Das obige ist der detaillierte Inhalt vonGulp praktische Konfiguration (2) – kleine und mittlere Projekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!