1. 第三方模块Gulp
微信截图_20200122154626.png
微信截图_20200122203901.png
const gulp = require('gulp');//引入
//建立任务
gulp.task('first',(cb) => {
console.log('第一个gulp');
gulp.src('./src/css/Starbucks.css')
//获取要处理的文件
.pipe(gulp.dest('dist/css'));
//将要处理的文件输出到dist目录
cb();//防止匿名函数出现错误
});
微信截图_20200122161229.png
微信截图_20200122203517.png
gulp-htmlmin
const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
gulp.task('htmlmin',(cbb) => {
gulp.src('./src/*.html')
//压缩html文件中的代码
.pipe(htmlmin({ collapseWhitespace: true }))
//压缩空格
.pipe(gulp.dest('dist'));
cbb();
});
cssmin
//css任务
//1.less语法转换
//2.css代码压缩
//
const csso = require('gulp-csso')
const less = require('gulp-less')
gulp.task('cssmin',(qw) =>{
//选择css目录下的所有less和css文件
gulp.src(['./src/css/*.less','./src/css/*.css'])
.pipe(less())//蒋less语法转换为css语法
.pipe(csso())//将css代码压缩
.pipe(gulp.dest('dist/css'))
qw();
})
js任务
- es6代码转化
2.代码压缩
//js
//1. es6代码转化
//2.代码压缩
const uglify = require('gulp-uglify');//压缩
const babel = require('gulp-babel');
gulp.task('jsmin',(df) => {
gulp.src('./src/js/*.js')
.pipe(babel({
presets: ['@babel/env']
}))
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
df();
});
复制文件夹
//复制文件夹
gulp.task('copy',(ds) => {
gulp.src('./src/img/*')
.pipe(gulp.dest('dist/img'));
gulp.src('./src/lib/*')
.pipe(gulp.dest('dist/lib'));
ds();
});
package.json
npm init
npm init -y //快速生成
npm install
//自动查找json下载
项目依赖 开发依赖
npm install gulp --save-dev
npm install --production//安装项目依赖dependencies
微信截图_20200123020011.png
微信截图_20200123020025.png
package-lock.json
微信截图_20200123020744.png
微信截图_20200123020800.png
查找规则
微信截图_20200123030026.png
微信截图_20200123021128.png
