1 开始使用gulp
npm install gulp-cli -g
npm init //工程目录下初始化工程
npm install gulp -D //工程目录下
2 各个插件
gulp-uglify 压缩代码
gulp-concat 合并代码到一个文件
gulp-rename 给文件重命名,可以添加前缀 后缀名
const gulp = require('gulp');
const rename = require('gulp-rename');
const concat = require('gulp-concat);
const uglify = require('gulp-uglify');
gulp.task('js',() => {
return gulp.src('./src/**/*.js') // 拼接路径的时候,*/ 表示一层目录 **/ 表示所有层级
.pipe(concat('bundle.min.js'))
.pipe(rename({
prefix: "前缀-",
suffix:'.后缀',
extname:'.扩展名'
}))
.pipe(uglify())
.pipe(gulp.dest('./build/js/'))
})
gulp.task('default',gulp.series(['js'])) //v4 版本的gulp需要使用series
gulp-babel 编译es6成es5(注意安装方式)
gulp-sourcemaps 源码转换(代码调试时可以看到非压缩的,方便定位问题)
const gulp = require('gulp');
const uglify = require('gulp-uglify');
const sourcemaps = require('gulp-sourcemaps');
const babel = require('gulp-babel');
gulp.task('js',() =>{
return gulp.src('./src/**/*.js')
.pipe(sourcemaps.init())
.pipe(babel({
presets:['@babel/env']
}))
.pipe(uglify())
.pipe(sourcemaps.write())
.pipe(gulp.dest('./build/js/'))
})
gulp.task('defualt',gulp.series(['js]))
gulp-imagemin 压缩图片
gulp-cssmin 压缩css
const gulp = require('gulp');
const cssmin = require('gulp-cssmin');
const imagemin = require('gulp-imagemin);
gulp.task('css',() => {
return gulp.src('./src/**/*.css)
.pipe(cssmin())
.pipe(gulp.dest('./build/css/'))
})
gulp.task('image',() => {
return gulp.src(['./src/**/*.png','./src/**/*.jpg','./src/**/*.gif','./src/**/*.svg'])
.pipe(imagemin())
.pipe(gulp.dest('./build/image/'))
})
gulp.task('default',gulp.series(['css','image']))