初识gulp

npm init -y
# 这里我其实没有安装成功，最终是使用cnpm i gulp -D安装的
yarn add gulp -D

修改package.json

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

配置gulpfile.js

// 引用gulp的一些方法
// src用于指定处理文件的源目录，dest用于指定处理后的文件保存的位置，series串行执行，watch 监听文件的执行
const { src, dest, series, watch } = require('gulp');

// 简化写法，例如：gulp-uglify可以不引入，直接写为plugins.uglify
const plugins = require('gulp-load-plugins')();

// 压缩js uglifyjs
function js(cb) {
  src('js/*.js')
    // 对选择的文件进行下一个环节
    .pipe(plugins.uglify())
    // 输出的目录
    .pipe(dest('./dist/js'));
  cb();
}

// 编译scss、less，压缩，并输出css
function css() {}

// 监听这些文件的变化
function watcher() {}

// 删除dist目录内容
function clean() {}

exports.scripts = js;
// 默认的处理
exports.default = function(cb) {
  console.log('hello world!');
  cb();
};

可以在这个网页搜索插件：
gulp plugins
也可以在npm中搜索

一些插件：

• gulp-uglify 压缩混淆
• gulp-rename
• del
• gulp-autoprefixer
• gulp-sass
• gulp-load-plugins

# 查看任务
npx gulp --tasks 

# 安装相关的依赖
yarn add gulp-sass gulp-autoprefixer gulp-load-plugins gulp-uglify del -D

yarn add browser-sync -D

最终，实现监听事件文件变化并动态刷新页面的代码:

// 引用gulp的一些方法
// src用于指定处理文件的源目录，dest用于指定处理后的文件保存的位置，series串行执行，watch 监听文件的执行
const { src, dest, series, watch } = require('gulp');
const del = require('del');
const browserSync = require('browser-sync').create();
const reload = browserSync.reload;

// 简化写法，例如：gulp-uglify可以不引入，直接写为plugins.uglify
const plugins = require('gulp-load-plugins')();

// 压缩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移除过时的前缀
        remove: false
      })
    )
    .pipe(dest('./dist/css'))
    .pipe(reload({ stream: true }));
  cb();
}

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

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

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

// exports.scripts = js;
// exports.style = css;
// exports.clean = clean;
// exports.watcher = watcher;
// 默认的处理
// exports.default = function(cb) {
//   console.log('hello world!');
//   cb();
// };

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