gulp常用操作

安装gulp依赖

npm install gulp --save-dev

下载gulp插件 Plugins | gulp.js

下载后可在package.json配置文件中看到已下载的插件和版本号

通过配置gulp配置文件gilpfile.js(放在根目录下)，并运行使用

常用的操作：

const  gulp=require('gulp');    //引用gulp
const  del=require('del');      //引用gulp删除插件
const  uglify=require('gulp-uglify');　　//引用压缩Js插件
const  css=require('gulp-clean-css');　　//gulp压缩css文件
const  rename = require("gulp-rename");　　//引用重命名插件
 
gulp.task('hello',function () {     //定义一个hello任务
    console.log('hello')
});
 
//task()：定义任务
//src():源文件
// pipe():管道流，接通源头文件与目标文件的输出
// dest():输出文件的目的地
// watch():监视文件
//事例：
// 1、复制单个文件
gulp.task('copyHtml',function () {
    return gulp.src('./src/public/login.html').pipe(gulp.dest("dist/public"))
});
 
// 2、复制多个文件
gulp.task('copyAllHtml',function () {
    return gulp.src("./src/public/*.html").pipe(gulp.dest('dist/public'));
});
 
// 3、复制指定文件
// [指定的文件已，指定的文件2]
gulp.task('copy2Js',function () {
    return gulp.src(["./src/public/js/ajax.js",'dist/public/js/classPage.js'])
    .pipe(gulp.dest("dist/public/js"))
});
 
// 4、某个文件
// ！排队的文件
gulp.task("copyNoJs",function () {
    return gulp.src(['./src/public/js/*.js','!./src/public/js/Classroom.js'])
        .pipe(gulp.dest('dist/public/js'))
});
 
// 5、复制多个后缀名的图片
// {选项一，选项二}
gulp.task("copyImage",function () {
    return gulp.src('./src/public/img/*.{png,jpg,bmp,jpeg,gif}')
        .pipe(gulp.dest('dist/public/img'))
});
 
// 6、执行多个任务
// gulp.task('任务名称',[任务依赖的模块],回调函数)
// 依赖任务之间没有顺序之分，异步执行
// 依赖任务之间完成后，在执行当前的回调函数
gulp.task('build',['copyAllHtml','copyNoJs','copyImage'],function () {
    console.log('编译成功')
});
 
// 7、Watch:监视文件的变化
gulp.task('myWatch',function () {
    gulp.watch('./src/public/login.html',['build'])
});
 
// 8、删除文件
gulp.task("del",function () {
    // del('./dist/public/img/*.{jpg,png,jepg,gif}')
    // *：所有文件
    // **：所有文件夹
    del(['./dist/public/js/*']);
    del(['./dist/**/*']);
});
 
gulp.task('default',function () {
    gulp.start('serve')
 
});
 
// 9、压缩js文件
gulp.task('ysjs',function(){
    return gulp.src('./src/public/js/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('./src/public/js'));
 
 
});
 
//10、 添加监听
gulp.task('watch_js',function(){
    return gulp.watch('./src/public/js/*.js',['ysjs'])
 
});
 
//11、压缩css文件
gulp.task('css',function () {
    return gulp.src('./src/public/sass/*.css')
        .pipe(css())
        .pipe(gulp.dest('./src/public/sass'))
});
//添加监听
gulp.task('jtCss',function () {
    return gulp.watch('./src/public/sass/*.css',['css'])
});
//12、重命名css文件
gulp.task('reName',function () {
    return gulp.src('./src/public/sass/*.css')
        .pipe(rename({suffix: '.css'}))
        .pipe(css())
        .pipe(gulp.dest('./src/public/sass'))
});　　

运行gulp任务的终端命令：      gulp 任务名

常用插件

gulp-load-plugins插件比较特殊，使用该插件可以简化其他插件引入操作，无需逐一require引入插件，在npm下载其他插件后，用 <$.插件名后缀> 可直接使用其他插件