gulp를 사용하여 파일 압축 및 브라우저 핫 로딩을 달성하는 방법

1. gulp 설치

　 우선 nodejs를 설치해야 합니다. 아직 설치하지 않으셨다면 직접 다운로드해 주세요. 먼저 명령줄에 npm install gulp -g 를 입력하세요. Download gulp

2. gulp 프로젝트 생성

필요한 프로젝트 폴더를 생성한 후 루트 디렉터리에 npm init를 입력하세요(npm init 명령 이 프로젝트와 관련된 정보를 저장하는 package.json 파일을 만듭니다. 예를 들어 사용하는 다양한 종속성)

3. npm install을 사용하여 다양한 종속성을 설치합니다.

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

　

여기서는 총 종속 항목이 사용됩니다. 각각의 구체적인 용도는 나중에 자세히 소개하겠습니다.

4. gulpfile.js 작성

　먼저 종속성을 선언합니다

　

　 그런 다음 가장 중요한 작업인 종속성을 구성합니다

　1. 압축된 CSS 구성

　

　 2. 구성 압축 js

　　

　　 3. 압축된 img 구성

　

　 4. html 구성, 여기는 압축이 없습니다. 압축할 필요가 없다고 생각합니다(순전히 의견의 문제입니다)

　　

　 5. 구성 지우기 각 패키지는 새 파일을 생성하므로 이전 파일을 지워야 합니다.

　　

　 6. 브라우저 핫 로딩 구성

　

　 7. 패키징 구성

여기서 runSequence는 다음을 참조합니다. 여러 파일을 동시에 실행하는 기능.

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
  )
});

위 내용은 gulp를 사용하여 파일 압축 및 브라우저 핫 로딩을 달성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!