gulp使用基本操作

1，初始化项目

npm init -y

2,加入gulp插件

yarn add gulp -D

3,查看gulp版本

npx gulp --version

4,创建配置文件，在根目录下创建gulpfile.js 写入

const {src,dest,series,watch}=require('gulp');

const browserSync=require('browser-sync').create();
const reload=browserSync.reload;
const plugins=require('gulp-load-plugins')();
const del=require('del');

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

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

function watcher() {
  watch('js/*.js',js);
  watch('css/*.scss',css);
}

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

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

exports.scripts=js
exports.styles=css
exports.clean=clean
exports.watcher=watcher
exports.default= series([
  clean,
  js,
  css,
  serve,
  watcher
])

5,查看命令列表，执行命令

npx gulp --tasks
npx gulp scripts

6,安装插件

yarn add gulp-sass gulp-autoprefixer gulp-load-plugins gulp-uglify del -D

7,# gulp常用插件之gulp-load-plugins使用

8,浏览器自动刷新增加插件

yarn add browser-sync -D