gulp 粗粗学习 记录下

Posted 2020-11-09 牧唐丫

看视频学习 粗粗记录下 以便以后学习

1.初记录

gulp.task //定义一个任务
gulp.src //锁定到做task任务的文件路径
gulp.dest //锁定到任务做完后文件去向的路径
gulp.watch //监控的一个任务 可以看做一个人任务

pipe:任务流的函数

 

2.常用的方法记录

　　需要把gulp 放在gulpfile.js

　　

// 定义一个任务 任务名：message  执行任务：gulp message 
gulp.task(‘message‘, function(){
  return console.log(‘执行任务message‘); 

}); 

// gulp拷贝 : 拷贝src文件里所有的html文件 到dist 去

gulp.task(‘copyHtml‘, function(){
  gulp.src(‘src/*.html‘)
      .pipe(gulp.dest(‘dist‘));
});

// 压缩图片 需要用到 gulp-imagemin 插件 需要先下载 npm i gulp-imagemin -D

const imagemin = require(‘gulp-imagemin‘);
gulp.task(‘imageMin‘, () =>
	gulp.src(‘src/images/*‘)
		.pipe(imagemin())
		.pipe(gulp.dest(‘dist/images‘))
);

// 压缩js
const uglify = require(‘gulp-uglify‘);  //需要下载插件 
gulp.task(‘minify‘, function(){
  gulp.src(‘src/js/*.js‘) //目标目录
      .pipe(uglify())  //经过 压缩插件
      .pipe(gulp.dest(‘dist/js‘)); //输出到目标目录
});

// 合并scss 
const sass = require(‘gulp-sass‘); //下载 转化SASS 插件
gulp.task(‘sass‘, function(){
  gulp.src(‘src/sass/*.scss‘) //目标路径
      .pipe(sass().on(‘error‘, sass.logError)) //经过 插件转化  有错话 打印
      .pipe(gulp.dest(‘dist/css‘)); //输入到 目标路径下  后缀名也改成 .CSS
});

// Scripts
const concat = require(‘gulp-concat‘);
gulp.task(‘scripts‘, function(){
  gulp.src(‘src/js/*.js‘)//目标路径
      .pipe(concat(‘main.js‘)) //经过 合并插件 进行合并
      .pipe(uglify())//进过压缩插件 进行压缩
      .pipe(gulp.dest(‘dist/js‘)); 最后输出到目标路径
});

//gulp 就能执行一些列任务 如下【任务数组】
gulp.task(‘default‘, [‘message‘, ‘copyHtml‘, ‘imageMin‘, ‘sass‘, ‘scripts‘]);

//监测 目标路径下 的文件 如果被修改了  然后就执行相关的任务  如下代码
gulp.task(‘watch‘, function(){
  gulp.watch(‘src/js/*.js‘, [‘scripts‘]);
  gulp.watch(‘src/images/*‘, [‘imageMin‘]);
  gulp.watch(‘src/sass/*.scss‘, [‘sass‘]);
  gulp.watch(‘src/*.html‘, [‘copyHtml‘]);
});