Gulp打包普通前端工程

 博客已经停更一年多了，因为工作比较忙，当然这不是主要原因。主要还是自己没有什么有价值的给大家分享。

     今天要跟大家分享的是前端打包技术，对于一个后台开发来说有的时候你可能不一定能用到vue进行前端开发，很多时候我们用的就是一个普通的web前端工程 如layui。但是天下武功为快不破谁不想自己开发的项目又快又好用，而且不易被人盗用。这个时候我们就需要打包、压缩、混淆代码你就需要用到gulp或者webpack。

        gulp和webpack的争夺。一下为摘抄字CSDN的其他文章https://www.cnblogs.com/lucio110/p/7549941.html

Gulp和Webpack的基本区别：

gulp可以进行js，html，css，img的压缩打包，是自动化构建工具，可以将多个js文件或是css压缩成一个文件，并且可以压缩为一行，以此来减少文件体积，加快请求速度和减少请求次数；并且gulp有task定义处理事务，从而构建整体流程，它是基于流的自动化构建工具。

Webpack是前端构建工具，实现了模块化开发和文件处理。他的思想就是“万物皆为模块”，它能够将各个模块进行按需加载，不会导致加载了无用或冗余的代码。所以他还有个名字叫前端模块化打包工具。

就我而言，我在实际当中会将两种都选择混合使用。虽然两个都可以进行代码的压缩合并减少代码体积，但gulp.config.js中gulp的代码更加简单易懂，需要压缩合并谁就用哪个方法，而webpack样式合并需要在node环境下下载插件才能使用。另一点，gulp 是基于流的打包工具，需要谁，引用谁，并且他的压缩简单明了，后期维护起来方便，webpack则可以将具体的模块进行划分，需要哪个模块就加载哪个模块，实现按需加载，并且排除掉冗余代码，减少代码体积。

总结起来就是，gulp是基于流的自动化构建工具，但不包括模块化的功能，如果要用到的话，就需要引入外部文件，比如require.js等；而webpack是自动化模块打包工具，本身就具有模块化，并且也具有压缩合并的功能。二者侧重点不同，我认为相互结合使用会提高代码质量和代码的优化。

            通过上述比较我们打包普通项目更适合用gulp。

实现步骤

1、安装gulp 参看官网https://www.gulpjs.com.cn/docs/getting-started/creating-tasks/最新版是4+笔者尝试过用新版但是坑比较多，添加多任务的串行等方法，watch也有区别，后台放弃4.0+用的是3.9.1

按照官网步骤:https://www.gulpjs.com.cn/docs/getting-started/quick-start/

安装好node.js  这个时候你的npm和npx都有了

可能遇见的问题：

问题一：npx mkdirp my-project时

报错：Could not install from "Files\nodejs\node_cache\_npx\4272" as it does not contain a package.json file.
npm config set cache "C:\Users\n\AppData\Roaming\npm-cache"--global

解决方案(参看的网络处理方式有效)

npm config set cache "C:\Users\登录windows的用户名\AppData\Roaming\npm-cache"--global

问题二：npm install --save-dev gulp后找不到gulp命令 win7下面可以全局安装同时设置缓存在配置环境变量

解决方案:

npm install gulp -g

npm config set prefix C:\Users\nodejs\node_modules\npm

配置环境变量path

至此gulp环境已经可以跑起来了。

 

2、接下来我们要配置任务：gulpfile.js他就是一个js只是我们需要用到很多的打包压缩混淆插件，不要想的太复杂。

配置之前先将gulp版本改成3.9.1因为4.0+有很多语法修改和坑等配套的插件好了再用吧。

npm install gulp@3 --save-dev

配置package.json所需要的依赖包

"devDependencies": {

"babel-preset-env": "^1.7.0",

"babel-preset-es2015": "^6.24.1",

"del": "^5.0.0",

"gulp": "^3.9.1",

"gulp-babel": "^6.1.3",

"gulp-clean": "^0.4.0",

"gulp-clean-css": "^4.2.0",

"gulp-connect": "^5.7.0",

"gulp-htmlmin": "^5.0.1",

"gulp-imagemin": "^6.1.0",

"gulp-rename": "^1.4.0",

"gulp-uglify": "^3.0.2",

"run-sequence": "^2.2.1"

}

配置完成后 npm install加载依赖

配置gulpfile.js

//引入gulp

var gulp = require("gulp");

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

var gulpHtmlMin = require('gulp-htmlmin');

var gulpCssMin = require('gulp-clean-css');

var rename = require('gulp-rename');

var gulpJsmin = require('gulp-uglify');

var gulpImgsmin = require('gulp-imagemin');

var connect = require('gulp-connect');

var sequence = require('run-sequence');

var clean = require('gulp-clean');

//资源文件跨域配置

var cors = function (req, res, next) {

res.setHeader('Access-Control-Allow-Origin', '*');

next();

};

gulp.task('default', function (cb) { //检测gulp是否启动

console.log("gulp启动了");

cb(err);

});

//引入压缩html所需的模块

gulp.task('htmlmin', function () { //可以单个压缩

//[ './a/**/*,'!./a/{test,test/**}']

return gulp.src(['src/**/*.html', '!src/{plugins,plugins/**}'])

.pipe(gulpHtmlMin({ //删除空格

collapseWhitespace: true, //删除注释

removeComments: true

}))

.pipe(gulp.dest('dist/')).pipe(connect.reload())

});

 

gulp.task('cssmin', function () {

return gulp.src(['src/**/*.css', '!src/{plugins,plugins/**}'])

// .pipe(rename({

// dirname: '' // 清空路径

// }))

.pipe(gulpCssMin())

.pipe(gulp.dest('dist/')).pipe(connect.reload())

});

 

gulp.task('jsmin', function () { //注意，js中可能有多个文件夹，比如说一些插件一些类库之类的,

//所以看你需求而定路径写对就行

return gulp.src(['src/**/*.js', '!src/{plugins,plugins/**}'])

//混淆js { mangle: { toplevel: true } }

.pipe(babel())

.pipe(gulpJsmin({ mangle: { toplevel: true } }))

//.pipe(gulpJsmin())

.pipe(gulp.dest('dist/')).pipe(connect.reload())

});

 

gulp.task('imagesmin', function () {

return gulp.src('src/images/**/*')

.pipe(gulpImgsmin())

.pipe(gulp.dest("dist/images/")).pipe(connect.reload())

});

//gulp.task('my-tasks', gulp.series('a', 'b', 'c', function() {

// Do something after a, b, and c are finished.

//}));

 

//gulp.task('build', gulp.parallel('styles', 'scripts', 'images', function () {

// Build the website.

//}));

 

//创建watch任务去检测html文件,其定义了当html改动之后，去调用一个Gulp的Task

gulp.task('watch', function () {

gulp.watch('./src/**/*.html', ['htmlmin']);

gulp.watch('./src/**/*.js', ['jsmin']);

gulp.watch('./src/**/*.css', ['cssmin']);

//gulp.watch('.src/images/**/*', ['imagesmin']);

});

 

//使用connect启动一个Web服务器

gulp.task('connect', function () {

connect.server({

root: 'src',

livereload: true,

port: 80,

middleware: function () {

return [cors];

}

});

});

gulp.task('dev', ['watch', 'connect']);

gulp.task("clean", function (cb) {

return gulp.src('dist/*', {

read: false

})

.pipe(clean({

force: true

}));

})

gulp.task('build', function () {

//同步执行先clean 在异步执行打包

//任务需要加return 否则同步无效

sequence('clean',

['htmlmin', 'cssmin', 'jsmin', 'imagesmin'],

function () {

//复制打包的dist到部署的服务器 如tomcat的wabapp下 springboot的public下

console.log("==========build success=============");

 

});

});

配置完成，添加npm命令

在package.json中添加

 

"scripts": {

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

"build": "gulp build", //打包

"dev": "gulp dev"//运行

}

测试 npm run dev 

访问浏览器成功！

好了今天的gulp打包普通项目就分享到这里。有什么不明白欢迎留言。本文章适合后台的前端开发者。