使用gulp實現文件壓縮及瀏覽器熱加載

一.安裝gulp

　　首先，你要安裝過nodejs，若是沒有安裝過的同窗請自行下載。  先再命令行裏輸入   npm install gulp -g   下載gulp

二.建立gulp項目

　　建立一個你須要項目文件夾，而後在根目錄輸入  npm init  （npm init命令會爲你建立一個package.json文件，這個文件保存着這個項目相關信息。好比你用到的各類依賴）

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

　　例：npm install browser-sync--save-dev

　　

　　這裏總共用到了這些依賴，請自行下載   具體各自都有什麼用 後面會具體介紹。

四.編寫gulpfile.js

　　首先，聲明這些依賴

　　

　　而後咱們就要開始最重要的工做了，配置這些依賴

　　1.配置壓縮css

　　

　　2.配置壓縮js

　　

　　3.配置壓縮img

　　

　　4.配置html，這裏沒有進行壓縮，感受沒有壓縮的必要 （純屬見仁見智）

　　

　　5.配置清楚文件，由於每次打包都會生成新文件  因此在這以前要把以前的文件給清除掉

　　

　　6.配置瀏覽器熱加載

　　

　　7.配置打包   

　　這裏的runSequence是指能同時執行多個命令

　　

　　8.設置gulp啓動時執行哪些配置

　　

 

　　最後放上所有代碼 供你們參考

　　

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