淘宝怎么做网站/关于营销的最新的新闻

gulp基本使用

目录介绍： src存放项目源文件   dist存放压缩转化的文件

针对html压缩抽取，css转换压缩，js转化压缩，普通文件的复制

const gulp = require('gulp')// html压缩抽取
const htmlmin = require('gulp-htmlmin')
const fileinclude = require('gulp-file-include');
// less->css转化压缩
const less = require('gulp-less');
const csso = require('gulp-csso');
// js转化压缩
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
// require来的是gulp中的exports对象，
// 通过gulp.task来建立任务
// 1:任务名称
// 2：任务的回调函数
gulp.task('first', done => {console.log('人生的第一个gulp任务')done()// 使用gulp.src获取要处理的文件gulp.src('./src/css/article.css')// 将处理后的文件输出到哪里.pipe(gulp.dest('./dist/css'))
});
// html任务：
// 1：html中的代码压缩
// 2：html公共样式的抽取
gulp.task('htmlmin', done => {done()gulp.src('./src/*.html').pipe(fileinclude()).pipe(htmlmin({ collapseWhitespace: true })).pipe(gulp.dest('./dist'))});
// 2： css任务
// 2.1： less转化为css
// 2.2： 压缩css
gulp.task('cssmin', done => {done()gulp.src(['./src/css/*.less', './src/css/*.css']).pipe(less()).pipe(csso()).pipe(gulp.dest('./dist'))
});
// js压缩打包
gulp.task('jsbabel', done => {done();gulp.src('./src/js/*.js').pipe(babel({// 可以判断当前代码的运行环境，将代码转化为当前环境所支持的代码presets: ['@babel/env']})).pipe(uglify()).pipe(gulp.dest('./dist'))})// 复制文件夹
gulp.task('copy', done => {done()gulp.src('./src/images/*').pipe(gulp.dest('./dist/images'))gulp.src('./src/lib/*').pipe(gulp.dest('./dist/lib'))
});
// 构建任务
gulp.task('default', gulp.series('htmlmin', 'cssmin', 'jsbabel', 'copy', function() {// Do something after a, b, and c are finished.console.log('成功构建gulp任务');
}))

使用gulp，就是在利用第三方包做一个总的规整

第三方包：下载，引用，使用