基于gulp搭建的前端自动化构建
程序员文章站
2022-04-01 22:57:12
...
基于gulp搭建的前端自动化构建,需要对gulp做文件路径配置,执行打包命令即可
官网链接:https://www.gulpjs.com.cn/
- 首先新建项目文件夹后,项目目录下创建 package.json 文件。
npm init
- 安装 gulp 命令行工具
npm install --global gulp-cli
- 安装 gulp,作为开发时依赖项
npm install --save-dev gulp
- 新建gulpfile.js文件,简单方法表示如下:
function defaultTask(cb) {
// place code for your default task here
cb();
}
exports.default = defaultTask
- 在项目根目录下执行 gulp 命令
gulp
- 现对gulpfile.js进行详细配置
gulp插件
我们要处理文件的合并、压缩等操作,接口中没有提供,都放在了插件中。
插件下载:
npm install 插件名 --save-dev
gulp-concat : 合并文件(js/css)
gulp-uglify : 压缩js文件
gulp-rename : 文件重命名
gulp-less : 编译less
gulp-sass:编译sass
gulp-clean-css : 压缩css
gulp-livereload : 实时自动编译刷新
gulp-htmlmin:压缩html文件
gulp-connect:热加载,配置一个服务器
gulp-load-plugins:打包插件(里面包含了其他所有插件)
未完全补全插件的信息,可根据下方代码文件看插件名称来下载,或者学习官网插件api。
代码文件见如下:
首先对需要引用的文件写完整
var gulp = require('gulp'),
mincss = require('gulp-mini-css'),
uglify = require('gulp-uglify'),
htmlmin = require('gulp-htmlmin'),
plumber = require('gulp-plumber'),
Replace = require('gulp-replace'),
processhtml = require('gulp-processhtml'),
imagemin = require('gulp-imagemin'),
pngquant = require('imagemin-pngquant'),
imageminJpegtran = require('imagemin-jpegtran'),
imageminGifsicle = require('imagemin-gifsicle'),
imageminOptipng = require('imagemin-optipng'),
imageminSvgo = require('imagemin-svgo'),
domSrc = require('gulp-dom-src'),
cheerio = require('gulp-cheerio'),
cache = require('gulp-cache'),
gutil = require('gulp-util'),
babel = require("gulp-babel");
其次命名标示清楚需要打包压缩的源文件,即src_xx命名信息,以及目的文件,命名未dest_xx信息。
var src_css = './src/css',
dest_css = './dest/css',
src_html = './src',
dest_html = './dest',
src_img = './src/img',
dest_img = './dest/img',
src_js = './srcA/js',
dest_js = './dest/js',
针对打包异常可采用控制台发声
var date = new Date().getTime();
function errrHandler( e ){
// 控制台发声,错误时beep一下
gutil.beep();
gutil.log(e);
this.emit('end');
}
最重要的就是建立gulp执行打包的方法,这里是分别对image/html/js/css等进行处理打包,function方法中需要添加好src_xx的路径信息,具体实现为固定写法,想了解深层次含义可以学习官网api。以下建立的task任务,命名分别为 ‘imagemin’ / ‘htmlmin’ / ‘minjs’ / ‘mincss’。
gulp.task('imagemin', function () {
gulp.src(src_img + '/**/*.{png,jpg,gif,ico}')
.pipe(plumber({errorHandler: errrHandler}))
.pipe(imagemin({
progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片
svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox属性
use: [pngquant(), imageminJpegtran({progressive: true})
, imageminGifsicle({interlaced: true}),
imageminOptipng({optimizationLevel: 3}), imageminSvgo()]
//使用pngquant深度压缩png图片的imagemin插件
}))
.pipe(gulp.dest(dest_img));
});
gulp.task('htmlmin', function () {
var options = {
removeComments: true,//清除HTML注释
collapseWhitespace: true,//压缩HTML
collapseBooleanAttributes: false,//省略布尔属性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: false,//删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
minifyJS: true,//压缩页面JS
minifyCSS: true//压缩页面CSS
};
gulp.src([src_html+'/**/*.html','!./srcA/{service,hardware}.html'])
.pipe(plumber({errorHandler: errrHandler}))
.pipe(Replace(/_VERSION_/gi, date))
.pipe(processhtml())
.pipe(htmlmin(options))
.pipe(gulp.dest(dest_html));
});
gulp.task('mincss', function () {
gulp.src(src_css+'/**/*.css')
.pipe(mincss())
.pipe(gulp.dest(dest_css));
});
gulp.task('minjs', () => {
return gulp.src(src_js+'/**/*.js')
.pipe(babel({
presets: ['es2015']
}))
.pipe(uglify())
.pipe(gulp.dest(dest_js));
});
打包的任务列举清楚后,下一步就是一次性执行任务了,也可针对上面的压缩单独操作。一般情况下可通过建立一个通用task 依次跑通所有的打包压缩任务,即使用gulp.run方法执行。
gulp.task('default',['clean'],function(){
gulp.run('minjs','mincss','htmlmin','imagemin');
// gulp.run('watch');
});
这里有注释了一个watch方法,即为监听,当我执行打包压缩后,我修改了开发工具中的代码,该watch方法可自动为项目进行打包压缩,十分便捷。
gulp.task('watch', function () {
gulp.watch(src_css+'/**/*.css',['mincss']);
gulp.watch(src_js+'/**/*.js',['minjs']);
gulp.watch(src_html+'/*.html',['htmlmin']);
gulp.watch(src_img+'/**/*.{png,jpg,gif,ico}',['imagemin']);
});
这里也写了一个缓存清除的task,可跟随默认打包一起执行使用。
gulp.task('clean', function (done) {//清除缓存
return cache.clearAll(done);
});
gulpfiles.js文件 即为上述代码段连接而成,有需要可私信邮箱发送给你
gulp常用命令
执行压缩: gulp default / gulp
编译页面: gulp htmlmin
编译脚本: gulp minjs
编译样式: gulp mincss
压缩图片: gulp imagemin
//语法检测: gulp eslint