安装并使用gulp小结

1：下载安装并配置nodejs
https://www.cnblogs.com/zhouyu2017/p/6485265.html

注：上面链接中第五步，配置环境变量信息：将【用户变量】下的【Path】修改为【D:\Develop\nodejs\node_global】
需要在Path中还加入：C:\Users\Administrator\AppData\Roaming\npm;
完整的：C:\Users\Administrator\AppData\Roaming\npm; D:\Develop\nodejs\node_global
2: 全局安装gulp:目的是在命令行里使用gulp的命令。（该步骤需要连网）
Windows+R。输入cmd。
执行：npm install gulp –g
3：命令行中cd到项目目录，局部安装gulp（如果不在项目中再次安装会报错，据说这样是为了避免发生版本冲突）（该步骤需要连网）
Windows+R。输入cmd。
执行：npm install gulp –save -dev
4：在项目目录下新建一个gulpfile.js文件（必须这个名字，这个文件算是一个配置文件），编写我们的需求，以便gulp能按着我们的意愿来执行。
5：每个模块可以完成不同的任务，所以我们经常要将所需模块require到gulpfile.js这个配置文件中(如果执行任务的时候报错找不到某个模块，只要npm install 这个模块到此目录就可以，不用-g)。比如我们要让gulp为我们压缩js文件：
注：
1):如果是压缩js文件，在开始需要引入require(‘gulp-uglify’);
引入完成后，需要执行npm install gulp-uglify
var gulp = require (‘gulp’);
var uglify = require(‘gulp-uglify’);
//新建一个压缩任务(名叫compress,名字随便起)，这个任务的作用是帮我们把写好的script文件夹下的所有.js文件压缩并保存到newScript文件夹下(gulp会自动创建newScript文件夹）。
gulp.task(‘compress’,function(){
gulp.src(‘script/*.js’)
.pipe(uglify())
.pipe(gulp.dest(‘newScript’))
})

2): 给压缩后的文件添加min后缀名reqiure(‘gulp-rename’)
引入完成后，需要执行npm install gulp-rename
var rename = reqiure(‘gulp-rename’)
gulp.task(‘watch’,function(){
gulp.watch(‘script/*.js’,function(event){
var paths = watchPath(event, ‘script’, ‘newScript’);
gulp.src(paths.srcPath)
.pipe(uglify())
//压缩后添加min后缀名。
.pipe(rename({suffix: ‘.min’}))
.pipe(gulp.dest(paths.distDir));
})
})
3):如果多个文件合并，需要引入require(‘gulp-concat’);
引入完成后，需要执行npm install gulp-concat
//1、引入包
var gulp = require(‘gulp);//引入gulp包
var concat = require(‘gulp-concat’);//引入支持合并的包
//2.创建任务
gulp.task(‘concat’,function(){//创建任务 任务名字叫task
return gulp.src(‘./src/*.js’)//代表要合并的文件是src目录下的所有js文件
.pipe(‘concat,’all.js’)//合并后文件存放在叫all.js的文件中
.pipe(‘gulp.dest(‘./dest/’)’)；//合并后的文件在一个叫dest的文件夹中
}
);
4): 如果我们想压缩html文件中的代码 则使用gulp-htmlmin这个包
引入完成后，需要执行npm install gulp-htmlmin
var gulp = require(‘gulp’);
var htmlmin = require(‘gulp-htmlmin’);
gulp.task (‘htmlmin’,function(){
return gulp.src(‘./src/*.html’)
.pipe(htmlmin({collaspseWhiteSpace:true//压缩html文档中的空白
}))
.pipe(gulp.dest(‘dist’))
});
5):添加监听事件，
gulp.task(‘testwatch’,function(){
gulp.watch(‘需要监听的脚本路径’,[‘监听完成需要执行的事件’]);
});
6): 如果是压缩css文件，在开始需要引入minifycss = require(‘gulp-minify-css’);
gulp.task(‘minifycss’, function() {
return gulp.src(‘./src/css/*.css’) //压缩的文件
.pipe(gulp.dest(‘./build/css’)) //输出文件夹
.pipe(minifycss());
});
7): 执行压缩前，先删除文件夹里的内容

//执行删除的时候不要把目录定在build的子目录中，windows删除目录的同时会报错
gulp.task(‘clean’, function(cb) {
del([‘build/css’, ‘build/js’], cb)
});

参考链接：https://blog.youkuaiyun.com/bbsyi/article/details/70833241
https://www.cnblogs.com/onlychen/p/6233461.html
https://blog.youkuaiyun.com/qq_33562825/article/details/60151259
https://blog.youkuaiyun.com/qq_27080247/article/details/50766219