npm scripts和Gulp
- 都能够是实现自动化构建
- Gulp语法简单
- 语法就是JavaScript语法
- npm scripts语法接近shell脚本
- Gulp生态完善，构建效率高
步骤
- 全局安装gulp客户端
npm install -g gulp-cli
- 初始化项目
npm init --yes
- 安装gulp包
npm install gulp -D
- 新建gulpfile文件(gulpfile.js)
- 创建gulp任务
- 执行gulp任务
gulp<task-name>
const gulp = require('gulp')
// 创建gulp任务
const task1 = (cd)=>{
console.log("task1 is running")
cd()
}
const task2 = (cd)=>{
console.log("task2 is running")
cd()
}
// 旧的使用方法
gulp.task("task3",(cd)=>{
console.log("task3 is running")
cd()
})
// 导出任务
module.exports = {
task1,
default: task2 //默认任务
}
Gulp组合任务
parallel并行，series串行
例子
const { task } = require("gulp");
const gulp = require("gulp")
const task1 = (cd)=>{
setTimeout(() =>{
console.log("task1 is running")
cd();
},1000)
}
const task2 = (cd)=>{
setTimeout(() =>{
console.log("task2 is running")
cd();
},1000)
}
const task3 = (cd)=>{
setTimeout(() =>{
console.log("task3 is running")
cd();
},1000)
}
// 任务的并行执行
exports.p = gulp.parallel(task1,task2,task3);
// 任务的串行执行
exports.s = gulp.series(task1,task2,task3)
Gulp文件操作
- Gulp是基于流的构建系统
// const gulp = require("gulp")
// 通过解构的方式引入函数
const { src,dest } = require("gulp")
// 声明任务
const style = ()=>{
// 流 就是异步操作
return src("src/style/main.less",{ base: "src" }).pipe(dest("dist"))
}
module.exports = {
style
}
创建样式文件
gulp官网
处理less
处理压缩
重命名
https://www.npmjs.com/package/gulp-rename
const { src, dest } = require('gulp')
const less = require('gulp-less')
const cleancss = require('gulp-clean-css')
const rename = require('gulp-rename')
const style = () =>{
return src('src/style/main.less',{ base : 'src'})
.pipe(less())
.pipe(cleancss())
.pipe(rename({"extname" : ".min.css"}))
.pipe(dest('dist'))
}
module.exports = {
style
}
autoprefixer(保证CSS的兼容性)
CSS hack
- CSS代码存在兼容性问题
- 同一段CSS代码在不同的浏览器呈现的效果可能不一样
- 针对不同浏览器写相应的CSS代码
- 这个过程，叫做CSS hack
CSS hack的目的就是让你的CSS代码能够兼容不同的浏览器
CSS hack - 属性前缀法
-
user-select 属性可以控制用户是否能选中文本（存在兼容性问题）
浏览器的CSS属性前缀
autoprefixer插件
Autoprofixer使用的是caniuse.com的数据来决定哪些属性需要加前缀
npm i install gulp-autoprefixer -D
const autoprefixer = require('gulp-autoprefixer')
.pipe(autoprefixer())
构建脚本文件
类似样式文件构建
所需插件
// 声明脚本构建任务
const script = () => {
return src("src/js/main.js",{ base: 'src' })
.pipe(babel({
presets: ['babel-preset-env']
}))
.pipe(uglify())
.pipe(rename({"extname" : ".min.js"}))
.pipe(dest("dist"))
}
构建HTML文件
// 构建页面
const html = () => {
return src("src/index.html")
.pipe(htmlmin({ collapseWhitespace : true,minifyCSS:true,minifyJS:true}))
.pipe(dest('dist'))
}
具体的参数看详细文档
html，js，css压缩没有具体的顺序，使用并行组合任务一并完成
// 使用并行执行
const build = parallel(style,script,html)
module.exports = {
style,
script,
html,
build
}
构建图片文件
依然报错的话，就删除node_module文件夹使用npm install重新下载依赖
默认进行无损压缩
// 图片构建任务
const image = () =>{
return src('src/images/**',{base: 'src'})
.pipe(imagemin([
// 无参数就是无损压缩
// 有参数，有损压缩，75％，具体的需要参考文档
imagemin.mozjpeg({quality:75,progressive:true})
]))
.pipe(dest('dist'))
}
文件清除
npm i del -D
先删后加
const clean = () =>{
return del('dist')
}
// 使用并行执行
const build = parallel(style,script,html,image)
// 串行
const dev = series(clean,build)
module.exports = {
dev,
build
}
服务发布
www.browsersync.io
安装依赖
npm i browser-sync -D
// 声明服务发布的任务
const serve = () =>{
bs.init({
// 禁用浏览器的browserSync connected提示框
notify:false,
server:{
// 指定服务启动的目录
baseDir:'./dist'
}
})
}
使用Bootstrap
引入bootstrap之后，要设置一些东西：
- 在src下的index.html引入bootstrap和其依赖jQuery
- 要在browserSync下加一个路径，映射路径，才能读取
routes:{
'/node_modules' : 'node_modules'
}
Reload热更新
- 第一：添加src监听
- 第二：添加dist监听
const serve = () =>{
// watch(被监视的文件，对应的任务)
watch('src/index.html',html)
watch('src/style/*.less',style)
watch('src/js/*.js',script)
watch('src/images/**',image)
bs.init({
// 禁用浏览器的browserSync connected提示框
notify:false,
files : 'dist/**', // 监视dist下的文件的变化，浏览器实时更新
server:{
// 指定服务启动的目录
baseDir:'./dist',
routes:{
'/node_modules' : 'node_modules'
}
}
})
}
网友评论