第一步、全局安装gulp
$ npm install --global gulp
第二步、在你需要打包的目录下执行安装依赖
$ npm install --save-dev gulp
第三步、在该目录下新建一个gulpfile.js文件
gulpfile.js该怎么写呢?
1.先搜索到自己所需要用到的插件,比如gulp-uglify、gulp-csso、gulp-html-minify等等
2.在该目录下通过npm安装这些插件
3.在gulpfile.js中配置这些任务
//引入需要用到的模块
const gulp = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const javascriptObfuscator = require('gulp-javascript-obfuscator');
const del = require('del');
const csso = require('gulp-csso');
const htmlminfy = require('gulp-html-minify');
const imagemin = require('gulp-imagemin');
const autoprefixer = require('gulp-autoprefixer');
const rev = require('gulp-rev');
var name = "dist";
//通过task配置任务,任务名和执行的函数;
gulp.task('del',() =>
del('dist')
);
gulp.task('html',() =>
gulp.src('src/*.html')
.pipe(htmlminfy())
.pipe(gulp.dest('./dist'))
);
gulp.task('img',() =>
gulp.src('src/img/*.{jpg,png,gif,ico}')
.pipe(imagemin())
.pipe(gulp.dest('./dist/img'))
);
gulp.task('css',() =>
gulp.src('src/css/*.css')
.pipe(csso({
restructure: false,
sourceMap: true,
debug: true
}))
.pipe(gulp.dest('./dist/css'))
);
gulp.task('js',() =>
gulp.src('src/js/*.js')
.pipe(babel({
presets: ['@babel/env']
}))
.pipe(uglify({
mangle: true, // 是否修改变量名,默认为 true
compress: true, // 是否完全压缩,默认为 true
}))
.pipe(javascriptObfuscator())
.pipe(gulp.dest('./dist/js'))
);
//配置,执行gulp时默认执行的任务,series表示顺序执行。
gulp.task('default',gulp.series('del','html','img','css','js'));
第四步、在该目录下执行gulp命令,执行完成打包