gulp
Gulp是一种前端自动化构建工具。
Gulp不需要写一堆繁杂的配置参数，API也非常简单，学习起来更容易。
Gulp是基于nodeJS中stream来读取数据和操作数据，其速度更快。
自动压缩JS文件。
2、自动压缩CSS文件。
3、自动合并文件。
4、自动编译Less/Sass源文件。
5、自动压缩图片。
6、自动刷新浏览器。
等等。。。
- 安装node.js
- 使用淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
1
- 安装gulp
cnpm install gulp -g //全局安装gulp
cnpm install gulp --save-dev //在项目中安装 ** install== i --save-dev == -D
cnpm init -y //自动配置文件
//将gulp的版本改为3.9.1
cnpm install //重新安装转换版本
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
- 使用gulp
执行操作
//cmd
//执行任务
gulp 任务名
//gulpfile.js 新建一个 .js文件 名字叫gulpfile
1
2
3
4
2
3
4
//引入gulp模块
var gulp=require("gulp");
//方法1 布置任务 task()
//三个参数，1.任务名称（你自己定义的命令名） 2.依赖（数组，可省略） 3.回调函数
gulp.task("default",function(){ //第一个任务必须是 default
})
gulp.task("default",['a',"b"],function(){
console.log("default任务执行")
})
gulp.task("a",function(){
console.log("a任务执行")
})
gulp.task("b",function(){
console.log("b任务执行")
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//方法2 源文件路径 src() 参数可以是个数组 获取要执行命令的文件
//方法3 目标文件路径 dest() 参数中的文件夹名称可以自动创建 输送执行完命令的文件
//方法4 管道方法 pipe() 表示对数据流操作
gulp.task("copy",function(){
gulp.src("src/index.html").pipe(gulp.dest("dest"))
})
//我想把咱们生产环境的一个css文件
//放到咱们线上环境里面去
//gulp.src 方法 获取你要放的文件，里面传的参数，是你这个文件的路径
//.pipe 这个方法是 要执行里面传的方法
//gulp.dest 方法 这个是方法是 将你刚才用src取到的文件放置在你dest方法里面参数的路径文件夹内
//src是找到文件 所以他带后缀，表示一个文件
//dest是将你刚才的文件，放到文件夹内，所以他不带后缀，他是一个文件夹，表示一个文件夹
gulp.task("copyjs",function(){
gulp.src("js/*.js").pipe(gulp.dest("dest/js")) //*.js代表全部js文件
})
gulp.task("copycss",function(){
gulp.src(["css2/*.css","css/*.css"]).pipe(gulp.dest("dest/css"))
})
gulp.task("copyall",function(){
gulp.src("src/*/**").pipe(gulp.dest("dest/all"))
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//方法5 监听 watch() 两个参数 1.监听文件的路径 2.监听的任务名称（数组）
//当你监听的这个文件，被改动了并保存了。 就回去执行你后面的监听任务
gulp.task("watchhtml",function(){
gulp.watch("src/index.html",["copy"])
})
//!!!!!退出监听ctrl+c
1
2
3
4
5
6
2
3
4
5
6
//通配符！！！！！！！！！！！！！！！
// **代表所有子文件下所有文件夹，
// *.js代表当前层级下所有.js文件 *.css所有css *.html所有页面文件
//后缀 是.XX *.xx就代表当前目录下全部xx的文件
// **/*.js代表当前层级下所有文件夹下所有js文件
1
2
3
4
5
6
2
3
4
5
6
- 各种插件
//1. gulp-cssmin 压缩css文件
//安装 cmd
cnpm install --save-dev gulp-cssmin //安装其他插件只需要改名称部分就可以
cnpm i-D gulp-cssmin
//使用 cmd
gulp cssmin
1
2
3
4
5
6
7
2
3
4
5
6
7
//cssmin
var cssmin=require("gulp-cssmin");
gulp.task("sass",function(){
gulp.src("*cssmin").pipe(cssmin()).pipe(gulp.dest("cssmin"))
})
1
2
3
4
5
6
2
3
4
5
6
//2. gulp-uglify 压缩js文件
//uglify
var uglify=require("gulp-uglify");
gulp.task("jjs",function(){
gulp.src("js/main.js").pipe(uglify()).pipe(rename("main.min.js")).pipe(gulp.dest("js"))
})
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
//3. gulp-concat 合并文件
//concat
var concat=require("gulp-concat");
gulp.task("concat",function(){
gulp.src(["src/css/1.css","src/css/2.css"]).pipe(concat("all.css")).pipe(gulp.dest("src/css"))
})
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
//4. gulp-imagemin 压缩图片
//imagemin
var imagemin=require("gulp-imagemin");
1
2
3
4
2
3
4
//5. gulp-sass 编译sass
//sass
var sass=require("gulp-sass");
gulp.task("sass",function(){
gulp.src("*scss").pipe(sass()).pipe(gulp.dest("sass"))
})
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
//6. gulp-rename 重命名
https://www.npmjs.com/package/gulp-rename
//rename
var rename=require("gulp-rename");
rename({suffix: '.min'})//在中间加
gulp.src("./src/main/text/hello.txt")
.pipe(rename({
dirname: "main/text/ciao",//文件夹名
basename: "aloha",
prefix: "bonjour-",//前缀
suffix: "-hola",//后缀
extname: ".md"
}))
.pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/bonjour-aloha-hola.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//7. gulp-connect 创建服务器
var connect=require("gulp-connect");
gulp.task('server',function(){
connect.server({
root:'src', //以谁为服务器根目录
port:8888 , // 端口号
livereload: true //启用热加载
});
})
//热加载
gulp.task("change",function(){ //创建改变任务
gulp.src("src/index.html").pipe(gulp.dest("src")).pipe(connect.reload());
})
gulp.task("html",function(){ //监听改变
gulp.watch("src/index.html",["change"])
})
gulp.task("start",["html","server"],function(){ //同时执行监听与服务
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//8 replace 替换文档内容（单纯的文档内容）
var replace=require("gulp-replace");
gulp.src("src/**/*.html").pipe(replace('meizu.css', 'meizu.min.css')).pipe(replace('bootstrap.css', 'bootstrap.min.css')).pipe(gulp.dest("dest")).pipe(connect.reload());
1
2
3
4
5
2
3
4
5
babel是兼容js 代码的工具
安装
cnpm install -g babel-cli //全局安装
cnpm install --save-dev gulp-babel //安装babel
cnpm install --save-dev babel-preset-es2015 //安装es6转es5
cnpm i -D gulp-babel @babel/core @babel/preset-env //两个模块
1
2
3
4
2
3
4
//在项目文件夹根目录创建 .babelrc文件 （无文件名只有后缀）
//内容填写为
{
"presets": ["@babel/env"],
"plugins": []
}
1
2
3
4
5
6
2
3
4
5
6
var babel = require("gulp-babel");
1