1、安装node
2、安装git
3、安装全局gulp
npm install -g gulp
4、gulp 初始化
npm init
初始化完成之后就会出现一个package.json文件、这个就是我们的项目描述文件
May be possible solution is:
rm -rf node_modules/
npm install
5、安装本地gulp
npm install gulp --save-dev
安装步骤完成
7、在当前的目录下创建gulpfile.js的文件
8、定义任务
/*
- 定义一个任务
- /
gulp.task('hello', function () {
console.log("hello gulp");
});
gulp.task('world', function () {
console.log("world")
});
/ - 定义一个组合任务
- /
gulp.task('default', ['hello', 'world'], function () {
console.log("回调");
});
Gulp很多对文件的拷贝删除创建合并压缩等等
9、拷贝多个文件(以图片为例)
/ - 拷贝
- dist 发行版本
- src 是一个相对路径、相对于自己这个配置文件的路径
- dest 指定目标路径
- /
gulp.task("copyHtml", function () {
return gulp.src("./app/index.html")
.pipe(gulp.dest('dist'));
});
/ - 拷贝多个文件(图片)
- /
gulp.task("copyImage", function () {
return gulp.src("./app/images/.jpg")
.pipe(gulp.dest('dist/images'));
});
// 多文件类型拷贝(现在只能拷贝一级)
gulp.task("copyImage2", function () {
return gulp.src("./app/images/*.{jpg,png}")
.pipe(gulp.dest('dist/images'));
});
// 多文件类型拷贝(多级拷贝)
// 能匹配任意字符(除了路劲分割符/ )
gulp.task("copyImage3", function () {
return gulp.src("./app/images/**/.{jpg,png}")
.pipe(gulp.dest('dist/images'));
});
10、合并子任务
/*
- 拷贝多个路劲(图片、html、css、js等)
- /
gulp.task("copyImage4", function () {
return gulp.src("./app/images/**/.{jpg,png}")
.pipe(gulp.dest('dist/images'));
});
gulp.task("copyImage5", function () {
return gulp.src(['./app/js/base.js','./app/js/index.js'])
.pipe(gulp.dest('dist/js'));
});
// gulp 是异步的 pipe是异步的
gulp.task("copyImage6", function () {
return gulp.src(["./app/js/*.js","!./app/js/index.js"])
.pipe(gulp.dest('dist/js'));
});
gulp.task("copyHtml",function(){
return gulp.src('./app/index.html')
.pipe(gulp.dest('dist'));
});
gulp.task("default",['copyHtml','copyImage6','copyImage4'],function(){
console.log("拷贝结束");
});
拷贝、复制
11、监控文件变化
/*
- 监控文件的变化
- 监控copyHtml的变化
- */
gulp.task('watch',function(){
gulp.watch('./app/index.html',['copyHtml'],function(){
console.log("index.html内容改变");
})
});
watch task src dest 都是gulp自己的方法、自己的方法是很弱小的
实现跟强大的功能需要借助gulp插件的支持
12、scss 在webstorm中。。需要添加node.js的支持、在watcher中 Program的nodejs安装路径的node.exe文件路径
13、编译sass
gulp.task("sass", function () {
return gulp.src('app/styles/main.scss')
.pipe(sass())
.pipe(gulp.dest('dist/styles'));
})
14、实时预览 创建服务器。是否可以当做本地服务器使用？
gulp.task("copyHtml", function () {
return gulp.src('./app/index.html')
.pipe(gulp.dest('dist'))
.pipe(connect.reload());
});
gulp.task("copyCss", function () {
return gulp.src('./app/styles/*.scss')
.pipe(sass())
.pipe(gulp.dest('dist/styles'))
.pipe(connect.reload());
});
gulp.task("default", ['copyHtml', 'copyImage6', 'copyImage4'], function () {
console.log("拷贝结束");
})
/*
- 编译sass
- */
gulp.task("sass", function () {
return gulp.src('app/styles/main.scss')
.pipe(sass())
.pipe(gulp.dest('dist/styles'));
});
;
/*
- 监控文件的变化
- 监控copyHtml的变化
- /
gulp.task('watch', function () {
gulp.watch(['./app/index.html','./app/styles/.scss'], ['copyHtml','sass'], function () {
console.log("index.html内容改变");
})
});
/* - 创建本地服务 gulp-connect
- 实时预览
- */
gulp.task('server', function () {
connect.server({
root:'dist',
port: 8080,
livereload:true//动态加载 实时刷新
});
});
gulp.task("default",["server","watch"],function(){
// 监听
console.log("实时监控预览、并刷新服务器");
})
15、合并文件
/*
- 合并文件
- /
gulp.task('concatScript',function(){
return gulp.src(["./app/js/.js", "./app/js/index.js"])
.pipe(concat('join-concat.js'))
.pipe(gulp.dest('dist/js'));
});
16、压缩文件 重命名
/* - 合并文件
- /
gulp.task('concatScript', function () {
return gulp.src(["./app/js/.js", "./app/js/index.js"])
.pipe(concat('join-concat.js'))
.pipe(rename('join-min-concat.js'))
.pipe(gulp.dest('dist/js'));
});
/* - 压缩文件
- */
gulp.task('uglify', function () {
return gulp.src(["./app/js/.js", "./app/js/index.js"])
.pipe(concat('join-concat.js'))
.pipe(uglify())
.pipe(rename('join-min.js'))
.pipe(gulp.dest('dist/js'))
});
/
17、压缩css
gulp.task("sass", function () {
return gulp.src('app/styles/main.scss')
.pipe(sass())
.pipe(minifyCss())
.pipe(rename('main-min.css'))
.pipe(gulp.dest('dist/styles'));
});
18、压缩图片
gulp.task("copyImage3", function () {
return gulp.src("./app/images/**/*.{jpg,png}")
.pipe(imagemin())
.pipe(gulp.dest('dist/images'));
});
19、自动修改引用