gulp入門

gulp怎麼玩

前端工做流

場景

vue-cli ??? 自動打包
vue build打包時候其實就是在文件的合併，壓縮，優化，到dist文件夾

開始

yarn add gulp -S

const gulp = require('gulp')

// 任務名、任務事
gulp.task('hello', function () {
  console.log('Gulp負責前端開發階段的任務，文件的合併，壓縮，優化')
})

執行任務：

gulp hello

任務數組,默認就不用寫了

gulp.task('default', ['hello'])

複製

// src 表明根目錄
gulp.task('copy-index', function() {
  return gulp.src('index.html')
    .pipe(gulp.dest('dist'))
})

直接打包整個文件夾的拷貝和處理

// *.*就是所有文件
// */* 走一級，匹配下一層
// **/* 全部都要
gulp.task('images', function () {
  return gulp.src('images/icons/*.{png,jpg}')
    .pipe(gulp.dest('dist/images/icon'))
})

打包多個

gulp.task('data', function () {
  return gulp.src(['xml/*.xml','json/*.json'])
    .pipe(gulp.dest('dist/data'))
})

跳過一些文件

排除相似secret-01.json的文件

return gulp.src(['xml/*.xml','json/*.json','!json/secret-*.json'])
    .pipe(gulp.dest('dist/data'))

監視watch

gulp.task('copy-index', function() {
  return gulp.src('index.html')
    .pipe(gulp.dest('dist'))
})


gulp.task('watch', function () {
  gulp.watch('index.html', ['copy-index'])
})

開放監聽

gulp watch

sass轉css

安裝包

yarn add gulp-sass -S
npm i gulp-sass --save-dev
yarn add --dev gulp-sass

pipe過一下

gulp.task('sass', function() {
  gulp.src('stylesheet/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('dist/css'))
})

熱更新

yarn add --dev gulp-connect

而後

const connect = require('gulp-connect')

gulp.task('server',function() {
  connect.server({
    root: 'dist/',
    port: 3000,
    livereload: true
  })
})

gulp.task('watch', function() {
  gulp.watch('index.html', ['copy-index'])
})

gulp.task('copy-index', function() {
  return gulp.src('index.html')
    .pipe(gulp.dest('dist'))
    .pipe(connect.reload())
})

gulp.task('default', ['server', 'watch'])

合併文件，優化減小併發

yarn add --dev gulp-concat

<script></script>
<script></script>

這樣引入？？有兩個請求哦！！減小請求數量！

gulp.task('script', function() {
  return gulp.src(['javascripts/jquery.js',
   'javascripts/modernizr.js'])
   .pipe(concat('vendor.js'))
   .pipe(gulp.dest('dist/js'))
})

壓縮重命名

const uglify = require('gulp-uglify')
const rename = require('gulp-rename')

gulp.task('zip', function() {
 return gulp.src(['javascripts/jquery.js',
  'javascripts/modernizr.js'])
  .pipe(concat('vendor.js'))
  .pipe(gulp.dest('dist/js'))
  .pipe(uglify())
  .pipe(rename('vendor.min.js'))
  .pipe(gulp.dest('dist/js'))
})

##壓縮css
   const minify = require('gulp-minify-css')

gulp.task('minify', function() {
gulp.src('stylesheet/*/.scss')

.pipe(sass())
.pipe(gulp.dest('dist/css'))
.pipe(minify())
.pipe(rename('style.min.css'))
.pipe(gulp.dest('dist/css'))

})

##圖片優化
    const imagemin = require('gulp-imagemin')

gulp.task('imagemin', function() {
return gulp.src('images/icons/*.{png,jpg}')

.pipe(gulp.dest('dist/images/icon'))
.pipe(imagemin())
.pipe(gulp.dest('dist/images/icon'))

})