看視頻學習 粗粗記錄下 以便以後學習

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‘]);
});
        
 

gulp 粗粗學習 記錄下