gulp
浅谈gulp
-
第一步、安装gulp:
全局的:npm i gulp -g 启动器
本地的:npm i gulp 核心库 -
第二步、编写配置:
gulpfile.js
在gulp中,存在已在处理流操作pipe,还有task函数
task可以用多个,处理一个格式的文件时,比如处理js文件
gulp.task('js', ()=>{ return xxx})
task的函数,全部处理都在return当中,xxx可以做需要的gulp操作
下面是gulpfile.js文件(运行gulp的必须物)
const gulp = require('gulp')
const uglify = require('gulp-uglify')
gulp.task('js', ()=>{
return gulp.src(['./src/js/*.js'])
//流操作
.pipe(uglify())
.pipe(gulp.dest('./build/js'))
})
gulp.task('default', ['js'])
一个简单的小测试,这里使用了两个包,一个gulp本体,一个gulp-uglify是用于压缩用的
- gulpfile文件里面必须要有一个
default
属性的task函数,不然就得自己一个一个的运行task, - default为总输出,就是你里面写了多少个task它都输出
return gulp.src([''])
这里,gulp.src([])里面放一个数组的原因是因为有可能有多个格式的文件,所以这里我使用了数组, pipe(uglify())就是用uglify包进行压缩,pipe是流,用node压缩过的都知道pipe(gulp.dest())
这里是输出目录,dest里面写的是需要输出的路径
一些gulp包的使用
const gulp = require('gulp')
const uglify = require('gulp-uglify')
const concat = require('gulp-concat')
const rename = require('gulp-rename')
const cssmin = require('gulp-cssmin')
const imagemin = require('gulp-imagemin')
- concat合并包
- rename重命名包
- cssmin css压缩包
- imagemin 图片压缩包
concat使用
gulp.task('js', ()=>{
return gulp.src(['./src/jg/**/*.js'])
.pipe(concat('bundle.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./bulid/js'))
})
在uglify压缩前,放一个concat(name),就可以把需要压缩的东西合并成一个新的文件
rename使用
gulp.task('js', ()=>{
return gulp.src(['./src/jg/**/*.js'])
// .pipe(concat('bundle.min.js'))
.pipe(uglify())
.pipe(rename({'suffix' : '.min'}))
.pipe(gulp.dest('./bulid/js'))
})
在输出前,使用rename({'suffix:name'})
这样就可以修改你需要输出的文件的名字
cssmin 的使用
gulp.task('css', ()=>{
return gulp.src(['./src/css/**/*.css'])
.pipe(concat('style.min.css'))
.pipe(cssmin())
.pipe(gulp.dest('./bulid/css'))
})
选择需要压缩的css文件,在输出前进行cssmin()即可压缩css文件
imagemin的使用
gulp.task('image', ()=>{
return gulp.src(['./src/image/**/*.jpg','./src/image/**/*.png','./src/image/**/*.gif'])
.pipe(imagemin([
imagemin.gifsicle({interlaced: true}),//渐进加载
imagemin.jpegtran({propressive: true}),
imagemin.optipng({optimizationLevel: 5})//优化级别
])
)
})
image的参数比较多,需要配置三个参数,分别处理jpf,gif,png的
因为之后要用的是webpack,所以gulp就稍微研究一下就好了
webpack
webpakc.config.js配置文件
module.ewports={
mode:'',
entry:''||{},
output:{
path,
filename
},
module:{
rules:[]
}
}
mode
:模式,有production
生产模式,development
开发模式
entry
:入口,string
为单入口,json
是多入口
output
:path
生成的文件地址,filename
文件名字[name]
为占位符
module
:模块,添加loader,loader是从后面开始读起
loader(核心)
处理css
- css-loader
- style-loader
rules:[{test:/\.css$/, use:['style-loader','css-loader']}]
就可以处理打包css的文件了
浏览器兼容
- postcss-loader
- autoprefixer
可处理浏览器的兼容性,帮你生成兼容前缀
postcss-loader需要一个配置文件,postcss.config.js
rules:[{test:/\.css$/, use:['style-loader','css-loader','postcss-loader']}]
postcss.config.js
module.exports={
plugins:[
require(autoprefixer)//需要这个插件
]
}
- file-loader
读取并且输出任何类型的文件(图片,文件之类的),当use有参数时,就需要这样子用
{test:/.(jpg|png|gif)$/i, use:{
loader:'file-loader',
options:{
outputPath:'images/',
}
}}
outputPath
是输出的路径
loader
是选择使用的loader
- url-loader
读取并且输出base64
{test:/.(jpg|png|gif)$/i, use:{
loader:'url-loader',
options:{
outputPath:'images/',
limit:500*1024
}
}}
url-loader就多一个limit选项,是最小界限,这里是设置了凡是低于500k的文件都编译成base64,正常是设置成32K为一个界限,32K以上就输出一个文件,一下就编译成base64放到js文件中去
url-loader可以顶替点file-loader,因为功能多一点
- less-loader编译less文件
需要装两个包less-loader less
less文件编译的时候,没法加载到页面,所以需要配合css-loader和style-loader一起使用
{test:/\.less$/, use:['style-loader','css-loader','less-loader']}
- babel-loader编译es6
三个包 babel-loader @babel/core @babel/preset-env
{test:/\.jsx?/i,//js或则jsx
exclude:/node_modules/,
use:{
loader:'babel-loader',
options:{
presets:['@babel/preset-env']
}
}
}
多一个选线,presets
这个是babel的运行环境
- source-map保留原始文件,方便查错
devtool:'source-map'//开发工具
在module后面加上这个 ,就可以使用source-map工具
- 热更新webpack-dev-server
下载包 webpack
,webpack-cli
,webpack-dev-server
在scripts中加上一句命令"start": "webpack-dev-server"
命令行运行npm run start
这里注意html的路径,dev-server
生成的文件是在服务器上的,不是存在磁盘上的,html读取build里面的文件是不会发生改变的,要改为服务器的地址,即根目录上的文件
- 代码质量-eslint
下载包eslint
,eslint-loader
看需求配置吧
.eslintrc
文件配置
{
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"indent": ["error", 2],//缩进
"linebreak-style": ["error", "windows"],//换行风格
"quotes": ["error", "double"],//引号
"semi": ["error", "always"]//分号
}
}
webpack.config.js
const path=require('path');
module.exports={
mode: 'development',//开发环境
entry: './src/js/1.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.min.js'
},
module: {
rules: [
{
test: /\.js$/i,
loader: 'eslint-loader',
exclude: /node_modules/,
options: {
}
}
]
},
devtool: 'source-map'
};
- 测试-jest
下载包jest
,jest-webpack
需要一个点.test.js
文件测试
const mod = require('../src/js/3.js')
test('fab 7 ',()=>{
expect(mod.fab(7).toBe(13))
})
3.js模块文件
export function fab(n){
if(n ==1 || n==2){
return 1
}else{
return fab(n-1)+fab(n-2)
}
}
如何处理除了js文件外的东西
很简单,把文件读取出来变成字符串然后再输出
先学习到这里,之后在项目中用到了,才有深刻的体验到打包工具的强大