Gulp的几个常用功能

npm 安装 Gulp

常用方法

gulp.task -- 定义任务

gulp.src -- 找到需要执行任务的文件

gulp.dest -- 执行任务的文件的出口

gulp.watch -- 观察文件是否发生变化

---

新建gulpfile.js文件

在根目录下新建一个名为gulpfile.js的文件。当执行gulp命令时，要根据这个文件下的代码来执行的，下面的定义的任务代码要写在这个文件中

定义任务

var gulp = require('gulp'); //导入gulp模块
gulp.task("任务名",function(){
  return //执行内容
})

执行任务 gulp 任务名

定义默认任务

gulp.task("default",function(){
  return //执行内容
})

执行默认任务 直接gulp即可

拷贝文件

gulp.task("执行名称", function () {
    gulp.src("src/*.html")  //找到要拷贝的文件，*号代表以html后缀结尾的文件
        .pipe(gulp.dest("dist")); //要拷贝到的文件目录，没有会自动创建
});

执行 gulp 执行名称

图片压缩

//先在npm里下载一个 gulp-imagemin 模块
var imagemin = require('gulp-imagemin'); //导入模块，自定义名称
gulp.task('执行名称', function () {
    gulp.src('src/image/*') //找到拷贝的文件，*号代表所有
        .pipe(imagemin()) //执行导入的模块
        .pipe(gulp.dest("dist/image"))//再用管道到输出的目录
})

执行 gulp 执行名称

js文件压缩

//先在npm里下载一个 gulp-uglify 模块
var uglify = require("gulp-uglify");
gulp.task("minify", function () {
    gulp.src("src/js/*.js") 
        .pipe(uglify())
        .pipe(gulp.dest("dist/js"))
})

同上 执行 gulp minify

sass转css

//npm i gulp-sass -D
var sass = require("gulp-sass");
gulp.task("sass", function () {
    gulp.src("src/sass/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("dist/css"))
})

同上 执行 gulp minify

代码合并

//npm i gulp-concat -D
var concat = require("gulp-concat");
gulp.task("concat", function () {
    gulp.src("src/js/*.js")
        .pipe(concat("main.js")) //后面要写合并后的文件名
        .pipe(uglify()) //可以在后面跟代码压缩
        .pipe(gulp.dest("dist/js"))
});

同上 执行 gulp concat

执行多个任务

gulp.task("default", ["message", "copyHtml", "imagemin", "sass","concat"]);
//在默认任务后面的 callback函数 使用一个数组，把之前的任务放进去

直接执行 gulp 就会把数组里的任务都执行

监听文件是否发生变化

gulp.task("watch", function () {
    gulp.watch("src/js/*js", ['scripts']) 
    gulp.watch("src/image/*", ['imagemin'])
    gulp.watch("src/sass/*.scss", ['sass'])
    gulp.watch("src/*.html",['copyHtml'])
})
//监听那个文件发生变化，后面就执行什么方法

执行 gulp watch 当修改文件保存后，就会自动执行

---

以上，只是gulp部分的常用功能，需要其他功能，可以网上查询需要的插件配合来使用，大体的使用方法就如上