gulp的简单使用方法

gulp

安装与执行

npm i gulp@3 -g   //全局安装gulp、
npm init -y   //初始化项目模块   会生成一个package.json
npm i gulp@3 --save-dev  //局部安装，开发依赖gulp
然后在根目录下新建gulpFile.js文件 //在文件中const gulp=require('gulp')
可以在命令行执行gulp（全局安装）来运行gulp.js 是基于node
gulp.task('任务名'，function(){任务执行的回调函数})   //gulp 任务名
gulp.task('default',function(){任务执行的回调函数}) //gulp
gulp.task('default,['前置任务名'],function(){})//同时执行

加载与保存

gulp.src是加载文件
gulp.task('default',function(){
gulp.src('./src/js/a.js')  //加载文件
gulp.src(['./src/js/a.js','./src/js/b.js'])  //加载多个文件用数组的形式
gulp.src('./src/js/*.js')//加载的文件在同一个文件下
(‘。/src/**/*.js’)  **代表所有文件夹下的所有内容包括这些文件下的后代文件夹
//可以用正则
})
gulp.src('./src/js/*.js').pipe(gulp.dest('./dist'))//将加载过来的文件保存在dist文件夹下

合并保存

npm i gulp-concat --save-dev   //文件合并的插件
gulpfile.js文件中也可以var concat=require('gulp-concat')
gulp.src("./src/**/*.js").pipe(concat("c.js")).pipe(gulp.dest('./dist'))//合并文件到c.js保存到dist文件

压缩

npm i gulp-uglify --save-dev   //压缩插件
同样在gulpfile.js文件中也可以var uglify=require('gulp-uglify')
使用：gulp.src("./src/**/*.js").pipe(concat("c.js")).pipe(uglify()).pipe(gulp.dest('./dist'))

重命名

npm i gulp-rename --save-dev //重命名插件
同样在gulpfile.js文件中也可以var rename=require('gulp-rename')
使用：gulp.src("./src/**/*.js").pipe(concat("c.js")).pipe(uglify()).pipe(rename("c.main.js")).pipe(gulp.dest('./dist'))

插件合集

npm i gulp-load-plugins --save-dev
在gulpdile.js文件中引入gulp后  引入var  plugins=require('gulp-load-plugins')()
使用：与上面一样 只不过名称变为plugins.src ,plugins.rename 等  

监听

gulp.task("default",function(){
gulp.watch("./src/**/*.*",[‘a’],function(){}    //监视src下的所有文件  执行a 就可以做这边文件修改  那边html自动改变
})

静态服务器搭建

npm i browser-sync --save-dev   
在gulpfile.js 中var gulp=require("gulp");
var plugins=require("gulp-load-plugins");
var browser=require("browser-sync").create(); //原本这是一个对象 需要加create()

gulp.task("dwatch",function(){
gulp.watch("./src/**/*.js",function(){

})
gulp.watch("./src/sass/*.scss",function(){

})
})

npm i gulp-sass --save-dev  //解析sass
npm i gulp-minify-css --save-dev  //压缩css

配置服务

gulp.task("default",["watch"],function(){
	browser.init({
		server:"./",    //不能指定某个文件 指定文件夹   默认找index.html   在index.html中要scrpit标签中引入压缩后的js文件  c.min.js这样就会watch检测
		port:4011
	})
})
检测文件要与server放在一起 ，且要放在server下面  且watch下 最后保存文件后面加on事件 执行browser.reload  就会自动刷新了   
gulp.watch可以检测js文件夹 再有一个gulp.watch 检测css文件夹

完整版

var gulp=require("gulp");
var plugins=require("gulp-load-plugins")();
var browser=require("browser-sync").create();

gulp.task("setJs",function(){
    gulp.src("./src/js/*.js")
    .pipe(plugins.concat("c.js"))
    .pipe(plugins.uglify())
    .pipe(plugins.rename("c.min.js"))
    .pipe(gulp.dest("./dist/"))
    .on("end",browser.reload);
})
gulp.task("setSass",function(){
    gulp.src("./src/**/*.scss")
        .pipe(plugins.concat("main.scss"))
        .pipe(plugins.sass())
        .pipe(plugins.minifyCss())
        .pipe(plugins.rename("main.min.css"))
        .pipe(gulp.dest("./dist/"))
        .on("end",browser.reload);
})

gulp.task("default",["setJs","setSass"],function(){
    browser.init({
        server:"./",
        port:4011
    });
    gulp.watch("./src/**/*.js",["setJs"]);
    gulp.watch("./src/**/*.scss",["setSass"])
});