gulp不生成打包文件_JavaScript之gulp打包

gulp是基于流/node的自动化构建工具，主要使用管道传输机制，三个重要的命令：gulp.src 指定需要打包的文件的入口

gulp.pipe 指定插件处理文件

gulp.dist 指定打包之后文件的输出路径

npm 6.14.7

node v12.18.2

本项目打包使用的插件del 清空build目录

gulp-babel ES6转换为ES5

gulp-concat 合并文件

gulp-uglify 压缩js文件

gulp-rename 文件重命名

gulp-htmlmin 压缩js文件

gulp-less less文件转换为css文件

gulp-clean-css 压缩css文件

gulp-imagemin 压缩图片

一、gulp安装与项目初始化1、安装node.js

node -v2、全局安装gulp-li

//安装gulp4.0之前，先卸载原来的gulp

npm rm--global gulp

//安装gulp-cli

npm install -g gulp-cli3、项目初始化

新建一个项目文件夹gulp-demo，在项目文件夹下初始化项目，生成package.json文件

//执行该命令，然后不断回车，最后输入yes，则初始化完成,生成package.json 截图1

npm init

//全部使用默认配置，快速生成package.json 截图2

npm init -y截图1截图2

package.json文件

{

"name": "gulp-demo",

"version": "1.0.0",

"description": "//基于gulp的项目",

"main": "index.js",

"scripts": {

"build": "gulp",

"test": "echo \"Error: no test specified\" && exit 1",

"start": "gulp watch"

},

"repository": {

"type": "git",

"url": "git+https://github.com/lin-vivian/gulp-demo.git"

},

"keywords": [],

"author": "",

"license": "ISC",

"bugs": {

"url": "https://github.com/lin-vivian/gulp-demo/issues"

},

"homepage": "https://github.com/lin-vivian/gulp-demo#readme",

"devDependencies": {

"gulp": "^4.0.2",

"gulp-htmlmin": "^5.0.1"

},

"dependencies": {

"react": "^16.13.1",

"react-dom": "^16.13.1"

}

}4、局部安装gulp，创建并编辑gulpfile.js文件

npm install gulp --save-dev

gulpfile.js

const gulp = require('gulp');

//开启一个任务gulp.task('default', function(){

//检测gulp是否启动 console.log("gulp启动了");

})

//如下图所示，表示成功

二、不同文件的压缩html文件压缩安装html依赖

npm install gulp-htmlmin --save-dev修改gulpfile.js文件

const gulp = require('gulp');

const gulpHtml = require('gulp-htmlmin')

//添加html压缩任务gulp.task('htmlmin', (done) => {

console.log('正在处理html文件');

gulp.src('./public/**/*.html')

.pipe(gulpHtml({

//删除空格 collapseWhitespace: true,

//删除注释 removeComments: true

}))

.pipe(gulp.dest('build/html'))

done()

});

// //开启一个任务gulp.task('default', gulp.series('htmlmin'))压缩文件

gulp

//或者

npm buildjs文件压缩ES6转换为ES5， 安装对应插件gulp-babel，使用babel 8.x 必须安装如下包才能让gulp正常运行

包安装

"@babel/core": "^7.10.5",

"@babel/plugin-proposal-class-properties": "^7.10.4",

"@babel/plugin-transform-runtime": "^7.10.5",

"@babel/preset-env": "^7.10.4",

"@babel/preset-react": "^7.10.4",

"@babel/runtime": "^7.10.5",

"babel-loader": "^8.1.0",

"gulp-babel": "^8.0.0",

npm install --save-dev gulp-babel

npm install --save-dev babel-loader

npm install --save-dev '@babel/core'

npm install --save-dev '@babel/plugin-proposal-class-properties'

npm install --save-dev '@babel/plugin-transform-runtime'

npm install --save-dev '@babel/preset-env'

npm install --save-dev '@babel/preset-react'

npm install --save-dev '@babel/runtime'

.babelrc文件添加，在项目根目录下

{

"presets": [

"@babel/preset-env",

"@babel/preset-react"

],

"plugins": [

"@babel/plugin-transform-runtime",

"@babel/plugin-proposal-class-properties"

]

}

gulpfile.js文件修改，并运行

const gulp = require('gulp');

const babel = require('gulp-babel');

const replace = require('gulp-replace');

const gulpHtml = require('gulp-htmlmin');

//html文件打包

gulp.task('htmlmin', (done) => {

console.log('正在处理html文件');

gulp.src('./public/**/*.html')

.pipe(gulpHtml({

//删除空格

collapseWhitespace: true,

//删除注释

removeComments: true

}))

.pipe(gulp.dest('build/html'))

done()

});

//js文件打包

gulp.task('jsmin', (done) => {

gulp.src('./src/**/*.js')

.pipe(babel()) //ES6转换为ES5

.pipe(gulp.dest('build/js'))

done()

})

// //开启一个任务

gulp.task('default', gulp.series('htmlmin', 'jsmin'))

gulp.task('watch', () => {

gulp.watch('src/**/*.*', gulp.series('default'))

})js文件压缩，添加gulp-uglify插件

添加插件

npm install --save-dev gulp-uglify

修改gulpfile.js文件

//js文件打包

gulp.task('jsmin', (done) => {

gulp.src('./src/**/*.js')

.pipe(babel()) //ES6转换为ES5

.pipe(uglify()) //js代码压缩

.pipe(gulp.dest('build/js'))

done()

})代码合并，添加gulp-concat插件(合并文件一定要在babel之后，不然会导致压缩不成功)

npm install --save-dev gulp-concat

修改gulpfile.js文件

const concat = require('gulp-concat');

//js文件打包

gulp.task('jsmin', (done) => {

gulp.src('./src/**/*.js')

.pipe(babel()) //ES6转换为ES5

.pipe(concat(main.js)) //多个文件合并为一个文件，注：文件合并必须在babel之后

.pipe(uglify()) //js代码压缩

.pipe(gulp.dest('build/js'))

done()

})less文件压缩编译less文件，将其转化为css文件

添加插件

npm install --save-dev gulp-less

修改gulpfile.js文件

const concat = require('gulp-less')

//less文件打包,编译成css

gulp.task('lessmin', (done) => {

gulp.src(['src/**/*.less'])

.pipe(concat('main.less'))

.pipe(less())

.pipe(gulp.dest('build/css'))

done()

})编译前的less文件编译后的css文件css文件压缩

添加插件

npm install --save-dev gulp-clean-css

修改gulpfile.js文件

const css = require('gulp-clean-css')

//less文件打包,编译成css，并压缩css文件

gulp.task('lessmin', (done) => {

gulp.src(['src/**/*.less'])

.pipe(concat('main.less'))

.pipe(less()) //编译less文件为css文件

.pipe(css({ compatibility: 'ie8' })) //压缩css文件

.pipe(rename('main.min.css'))

.pipe(gulp.dest('build/css'))

done()

})压缩前的css文件图片压缩

添加插件

cnpm install --save-dev gulp-imagemin

修改gulpfile.js文件

const image = require('gulp-imagemin')

//压缩图片

gulp.task('imagemin', (done) => {

gulp.src(['src/static/images/*'])

.pipe(image())

.pipe(gulp.dest('build/image'))

done()

})压缩前后文件大小比较

总结使用gulp4打包静态资源的时候，npm和node必须升级到对应版本，否则会出错

使用插件的时候一定要注意与gulp3插件的区别，版本不匹配也会导致压缩出错

js文件压缩的时候，一定要先将ES6的代码先转换为ES5的代码，然后再合并并压缩，否则js文件不会打包成功

图片压缩的时候，使用npm安装gulp-imagemin插件如果出现下面的问题，则再使用cnpm/npm重复安装，多安装几次!!!!