初始Gulp

　　Gulp：

1、开源的js自动化工具

2、用于前后端代码管理的一种工具

3、基于node和npm应用的构建工具

4、主要处理耗时及重复的任务

5、可以解决上百种的任务

 

1、压缩代码

2、合并代码

3、压缩图片

4、Sass转换

　　原理：

1、基于NodeJs中的数据流

2、主要使用pipe事件输入输出

3、插件独立使用

 

　　优势：

1、基于代码进行配置

2、可读性更高

3、基于数据流哦，所以可以操作pipe()事件

实例如下几种：

1、拷贝文件

2、压缩图片

3、压缩JS代码

4、Sass转换

5、执行多任务

6、代码合并

7、监听文件

 

//  处理任务
var gulp = require("gulp")
var imagemin = require("gulp-imagemin")
var uglify = require("gulp-uglify")
var sass = require("gulp-sass")
var concat = require("gulp-concat")

/**
 * 常用方法
 * gulp.task --- 定义任务
 * gulp.src   --- 找到需要执行任务的文件
 * gulp.dest  --- 执行任务的文件的去处
 * gulp.watch --- 观察文件内是否发生变化
 */

// 定义任务
gulp.task("message", function() {
  return console.log('gulp is running');
})

// // 执行任务 gulp + 任务名称(message)
// //定义默认任务
// gulp.task("default", function() {
//   return console.log('这是默认的任务，只需要执行gulp即可');
// })

// 拷贝文件
gulp.task("copyHtml", function() {
  gulp.src('./src/*.html')
      .pipe(gulp.dest("dist"))
})

/**
 * 图片压缩
 * 安装插件 cnpm install --save-dev gulp-imagemin
 */
gulp.task("imageMin", function() {
  gulp.src("./src/images/gulp1.jpg")
      .pipe(imagemin())
      .pipe(gulp.dest("dist/images"))
})

// 压缩js文件
// gulp.task("minify", function() {
//   gulp.src("./src/js/*.js")
//       .pipe(uglify())
//       .pipe(gulp.dest("dist/js"))
// })

// sass 转换为css
gulp.task("sass", function() {
  gulp.src('./src/sass/style.scss')
      .pipe(sass().on('error', sass.logError))
      .pipe(gulp.dest("dist/css"))
})

// 代码合并
gulp.task("script", function() {
  gulp.src("src/js/*.js")
      .pipe(concat("main.js"))
      .pipe(uglify())
      .pipe(gulp.dest("dist/js"))
})

// 监听文件是否发生变化
gulp.task("watch", function() {
  gulp.watch("src/js/*.js", gulp.series("script"))
  gulp.watch("src/images/*", gulp.series("imageMin"))
  gulp.watch("src/sass/*.scss", gulp.series("sass"))
  gulp.watch("src/*.html", gulp.series("copyHtml"))
})

// 如何执行多个任务
// 执行任务 gulp + 任务名称(message)
//定义默认任务
// gulp.task("default", ['message', 'copyHtml', 'imageMin', 'minify', 'sass']) // gulp 3
gulp.task('default',gulp.parallel('message', 'copyHtml', 'imageMin', 'sass', 'script', () => {
  // Do something after a,b, and c are finished.
  console.log('执行了。。。')
}))