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部分的常用功能，需要其他功能，可以网上查询需要的插件配合来使用，大体的使用方法就如上
