So verwenden Sie gulp, um Dateikomprimierung und Browser-Hot-Loading zu erreichen

1. Installieren Sie gulp

　Zunächst müssen Sie nodejs installieren, laden Sie es bitte selbst herunter. Geben Sie zunächst in der Befehlszeile npm install gulp -g Download gulp

ein. 2. Erstellen Sie ein Gulp-Projekt.

Erstellen Sie ein Projekt Benötigter Ordner, und geben Sie dann npm init im Stammverzeichnis ein (der Befehl npm init erstellt für Sie eine package.json-Datei, in der Informationen zum Projekt gespeichert werden. Zum Beispiel die verschiedenen Abhängigkeiten, die Sie verwenden)

3. Verwenden Sie npm install, um verschiedene Abhängigkeiten zu installieren

Beispiel: npm install browser-sync--save-dev

　

Diese Abhängigkeiten werden hier insgesamt verwendet. Bitte laden Sie sie selbst herunter. Die spezifischen Verwendungszwecke der einzelnen Abhängigkeiten werden später ausführlich vorgestellt.

4. Schreiben Sie gulpfile.js

Deklarieren Sie zunächst diese Abhängigkeiten

　

Dann beginnen wir jetzt mit der wichtigsten Arbeit , konfigurieren Sie diese Abhängigkeiten

　1. Konfigurieren Sie komprimiertes CSS

　

　2. Konfigurieren Sie komprimiertes JS

　

3. Konfigurieren Sie die Bildkomprimierung

　

　4. Konfigurieren Sie HTML, hier gibt es keine Komprimierung, ich denke, dass keine Komprimierung erforderlich ist (reine Ansichtssache)

　

　5. Konfigurieren Sie die Dateien klar, da bei jedem Packen neue Dateien generiert werden. Daher müssen Sie vorher die vorherigen Dateien löschen

　

　6. Hotload des Konfigurationsbrowsers

　

7. Konfigurationspaketierung

Die runSequence bezieht sich hier auf die Fähigkeit, mehrere Befehle gleichzeitig auszuführen Zeit

　8. Legen Sie fest, welche Konfigurationen ausgeführt werden sollen, wenn Gulp startet

　

Endlich alles eingeben der Code als Referenz

　

var gulp = require('gulp');var sass = require('gulp-sass');var browserSync = require('browser-sync');var uglify = require('gulp-uglify');var imagemin = require('gulp-imagemin');var minifyCSS  = require('gulp-minify-css');var cache = require('gulp-cache');var del = require('del');var runSequence = require('run-sequence');var minifyHtml= require("gulp-minify-html");

gulp.task('sass', function(){   //打包sass
  return gulp.src('app/scss/**/*.scss')
    .pipe(sass()) // Converts Sass to CSS with gulp-sass.pipe(gulp.dest('app/css'))
    .pipe(browserSync.reload({
      stream: true}))
});

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

    gulp.src('app/**/*.js')

    .pipe(uglify())//压缩.pipe(gulp.dest('dist'));

});

gulp.task('css', function () {
    gulp.src('app/css/*.css')
    .pipe(minifyCSS())
    .pipe(gulp.dest('dist/css'))
})

gulp.task('minify-html',function() {

      gulp.src('app/**/*.html')//要压缩的html文件 .pipe(gulp.dest('dist'));

});


gulp.task('images', function(){  return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')  // Caching images that ran through imagemin  .pipe(cache(imagemin({
      interlaced: true})))
  .pipe(gulp.dest('dist/images'))
});

gulp.task('clean', function(callback) {
  del('dist');  return cache.clearAll(callback);
});

gulp.task('watch',['browserSync', 'sass'],function(){   //我们可以在watch任务之前告知Gulp，先把browserSync和Sass任务执行了再说。
  gulp.watch('app/scss/**/*.scss', ['sass']);
  gulp.watch('app/*.html', browserSync.reload);
  gulp.watch('app/js/**/*.js', browserSync.reload);  // Other watchers});

gulp.task('browserSync', function() {  //浏览器热加载  browserSync({
    server: {
      baseDir: 'app'},
  })
});

gulp.task('build', function (callback) {
  runSequence('clean',['minify-html','js','images','css'],callback)
});

gulp.task('default', function (callback) {
  runSequence(['sass','browserSync', 'watch'],
    callback
  )
});

Das obige ist der detaillierte Inhalt vonSo verwenden Sie gulp, um Dateikomprimierung und Browser-Hot-Loading zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!