gulp安装与使用
@ 姜波 | 星期日,八月 4 日,2019 年 | 1 分钟阅读 | 更新于 星期日,八月 4 日,2019 年

安装

npm init -y
npm install --save-dev gulp

"scripts": {
    "build": "gulp"
 }

创建gulpfile.js

  • 压缩js
  • 对scss/less编译、压缩,输出css文件
  • 监听文件变化
  • 删除dist目录中的内容
  • 热更新
npm install -D gulp-sass gulp-autoprefixer gulp-load-plugins gulp-uglify del

npm install -D browser-sync

const { src, dest, series, watch } = require('gulp')
const del = require('del')
// gulp-uglify => plugins.uglify = require('gulp-uglify')
const plugins = require('gulp-load-plugins')()

const browerSync = require('brower-sync').create()
const reload = browerSync.reload

// 压缩js uglifyjs
function js(cb){
  src('js/*.js')
  // 下一个处理环节
  .pipe(plugins.uglify())
  .pipe(dest('./dist/js'))
  .pipe(reload({stream:true}))
  cb()
}

// 对scss/less编译、压缩,输出css文件
function css(cb){
  src('css/*.scss')
  .pipe(plugins.sass({outputStyle:'compressed'}))
  .pipe(plugins.autoprefixer({
    cascade:false,
    remove:false
  }))
  .pipe(dest('./dist/css'))
  .pipe(reload({stream:true}))
}

// 监听这些文件的变化
function watcher(){
  watch('js/*.js',js)
  watch('css/*.scss',css)
}

// 删除dist目录中的内容
function clean(cb){
  del('./dist')
  cb()
}

// server任务
function serve(cb){
  browerSync.init({
    server:{
      baseDir:'./'
    }
  })
  cb()
}

exports.scripts = js // npx gulp scripts
exports.styles = css // npx gulp styles
exports.clean = clean // npx gulp clean
exports.default = series([
  clean,js,css,serve,watcher
])
package.json
{
	browserslist:[
    'last 2 version',
    '> 2%'
  ]
}
gulp
保存为图片

公众号

Image text

QQ

Image text

微信

Image text

微信打赏

Image text

社交链接