Gulp说明：
Gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器，基于node.js，它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。我们在编写的过程中通常都是团队协作，这里我们就可以通过Gulp提交代码，实现代码的统一。
Gulp安装：
1. 进入项目所在目录，使用npm安装gulp-cli脚手架工具（脚手架设置全局安装，方便其他项目使用）
安装完成后，可通过gulp -v查看gulp版本信息
2. 安装gulp到项目中（-s表示写入到dependencies）
此时项目目录中自动加了package-lock.json文件
默认只添加了package-lock.json文件，没有package.json文件
需手动执行npm init，并输入相关设置创建package.json文件
package.json文件中内容如下：
1 {
2 "name": "gulp-demo",
3 "version": "1.0.0",
4 "description": "gulp-demo",
5 "main": "index.js",
6 "dependencies": {
7 "gulp": "^4.0.2"
8 },
9 "devDependencies": {},
10 "scripts": {
11 "test": "echo \"Error: no test specified\" && exit 1"
12 },
13 "author": "",
14 "license": "ISC"
15 }
3. 按需安装需要使用的插件
常用插件有如下：
- gulp-clean：用于清理;
- gulp-notify：用于打印消息文本;
- gulp-rename：用于修改名字;
- gulp-concat：用于合并文件;
- gulp-zip：用于生成一个zip压缩包;
- gulp-minify-css：用于压缩css;
- gulp-autoprefixer：用于给css添加前缀;
- gulp-imagemin：用于给图片进行优化;
- gulp-uglify：用于压缩js;
- amd-optimize：用于amd模块引用编译；
- gulp-import-css：如果css文件是通过import导入的可以使用此插件进行合并优化;
- gulp-rev-replace：用于替换;
- gulp-useref：引入使用build标记，进行替换;
- gulp-rev：生成md5文件名;
- gulp-filter：对文件进行过滤;
- gulp-header：压缩之后将注释写入到文件的头部
- gulp-if：进行逻辑判断
- gulp-size：获取文件大小
- gulp-less：编译less文件
- gulp-sass：编译sass文件
- gulp-file-include：对文件进行引入
- gulp-sourcemaps：生成map文件
- gulp-livereload：自动刷新
- gulp-clean-css：css压缩
- browserSync：启动server并启动热更新
- gulp-plumber : 监测工作流，报错，防止遇到错误时直接退出gulp
- gulp-rev : 文件名添加版本号
- gulp-css-spritesmith：根据css文件自动生成雪碧图
如果要查找gulp插件，一般有两个地方：
安装完所需插件后（-s 安装），package.json 文件内容自动改变
1 {
2 "name": "gulp-demo",
3 "version": "1.0.0",
4 "description": "gulp-demo",
5 "main": "index.js",
6 "dependencies": {
7 "gulp": "^4.0.2",
8 "gulp-clean-css": "^4.2.0",
9 "gulp-concat": "^2.6.1",
10 "gulp-notify": "^3.2.0",
11 "gulp-rename": "^1.4.0",
12 "gulp-uglify": "^3.0.2"
13 },
14 "devDependencies": {},
15 "scripts": {
16 "test": "echo \"Error: no test specified\" && exit 1"
17 },
18 "author": "",
19 "license": "ISC"
20 }
配置文件：
创建 gulpfile 文件，并写入相关配置
1 var gulp = require(‘gulp‘), // gulp基础库
2 notify = require(‘gulp-notify‘), // 提示
3 concat = require(‘gulp-concat‘), // 合并文件
4 rename = require(‘gulp-rename‘), // 文件重命名
5 uglify = require(‘gulp-uglify‘), // js压缩
6 cleancss = require(‘gulp-clean-css‘) // css压缩
7
8
9 // css处理
10 gulp.task(‘minifycss‘, function () {
11 return gulp
12 .src([
13 ‘./css/style-1.css‘,
14 ‘./css/style-2.css‘
15 ])
16 .pipe(concat(‘all.css‘)) //合并css文件到"all.css"
17 .pipe(gulp.dest(‘./dist‘)) //设置输出路径
18 .pipe(rename({ suffix: ‘.min‘ })) //修改文件名
19 .pipe(cleancss()) //压缩文件
20 .pipe(gulp.dest(‘./dist‘)) //输出文件目录
21 .pipe(notify({ message: ‘minifycss task ok‘ })) //提示成功
22 })
23
24 // js处理
25 gulp.task(‘minifyjs‘, function () {
26 return gulp
27 .src([
28 ‘./js/javascript-1.js‘,
29 ‘./js/javascript-2.js‘
30 ]) //选择合并的JS
31 .pipe(concat(‘all.js‘)) //合并js
32 .pipe(gulp.dest(‘./dist‘)) //输出
33 .pipe(rename({ suffix: ‘.min‘ })) //重命名
34 .pipe(uglify()) //压缩
35 .pipe(gulp.dest(‘./dist‘)) //输出
36 .pipe(notify({ message: ‘minifyjs task ok‘ })) //提示
37 })
38
39
40 // 先创建Task，后使用
41 gulp.task(‘default‘,
42 gulp.series(gulp.parallel(
43 ‘minifycss‘,
44 ‘minifyjs‘
45 )
46 )
47 )
gulpfile.js
执行Task：
执行 gulp，进行自动化构建
执行成功输入提示信息，
并将构建后的文件生成到指定目录
测试效果：
测试构建后的文件
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Gulp Demo</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <link href="./dist/all.min.css" type="text/css" rel="stylesheet" /> 7 <script src="./dist/all.min.js" type="text/javascript"></script> 8 </head> 9 <body> 10 <div class="div-1" 11 onclick="clickDiv1();"> 12 Div 1 13 </div> 14 <div class="div-2" 15 onclick="clickDiv2();"> 16 Div 2 17 </div> 18 </body> 19 </html>
效果与引用原文件（css，js）一致，perfect. (￣▽￣)~*
参考链接：https://www.jianshu.com/p/34c67fe7ac99
原文地址：https://www.cnblogs.com/baitao/p/11640594.html
时间： 2024-10-29 12:57:22