JS中如何使用gulp實(shí)現(xiàn)壓縮文件及瀏覽器熱加載功能

小編給大家分享一下JS中如何使用gulp實(shí)現(xiàn)壓縮文件及瀏覽器熱加載功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

gulp類似于grunt，都是基于Node.js的前端構(gòu)建工具。不過(guò)gulp壓縮效率更高。

一.安裝gulp

　　首先，你要安裝過(guò)nodejs，如果沒(méi)有安裝過(guò)的同學(xué)請(qǐng)自行下載。  先再命令行里輸入   npm install gulp -g   下載gulp

二.創(chuàng)建gulp項(xiàng)目

　　創(chuàng)建一個(gè)你需要項(xiàng)目文件夾，然后在根目錄輸入  npm init  （npm init命令會(huì)為你創(chuàng)建一個(gè)package.json文件，這個(gè)文件保存著這個(gè)項(xiàng)目相關(guān)信息。比如你用到的各種依賴）

三.使用npm install 安裝各種依賴

　　例：

npm install browser-sync--save-dev

　　這里總共用到了這些依賴，請(qǐng)自行下載   具體各自都有什么用 后面會(huì)具體介紹。

四.編寫gulpfile.js

　　首先，聲明這些依賴

　　然后我們就要開(kāi)始最重要的工作了，配置這些依賴

　　1.配置壓縮css

　　2.配置壓縮js

　　3.配置壓縮img

　　4.配置html，這里沒(méi)有進(jìn)行壓縮，感覺(jué)沒(méi)有壓縮的必要 （純屬見(jiàn)仁見(jiàn)智）

　　5.配置清楚文件，因?yàn)槊看未虬紩?huì)生成新文件  所以在這之前要把之前的文件給清除掉

　　6.配置瀏覽器熱加載

　　7.配置打包  

　　這里的runSequence是指能同時(shí)執(zhí)行多個(gè)命令

　　8.設(shè)置gulp啟動(dòng)時(shí)執(zhí)行哪些配置

　　最后放上全部代碼 供大家參考

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任務(wù)之前告知Gulp，先把browserSync和Sass任務(wù)執(zhí)行了再說(shuō)。
 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
 )
});

以上是“JS中如何使用gulp實(shí)現(xiàn)壓縮文件及瀏覽器熱加載功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！