gulp基本使用

gulp 使用方法 ：
1、在项目下打开 命令行
2、运行 gulp 命令 ， 会有提示No gulpfile found
3、在项目根目录下创建一个文件 gulpfile.js
4、再次运行 gulp 命令 ， 会有提示 ：
Task 'default' is not in your gulpfile
说明运行gulp命令时，会自动查找gulpfile中的 default 任务

5、布置任务 default 任务
先引入gulp模块 使用require()方法引入
例如 ： var g = require("gulp");
使用 task()方法布置任务 有三个参数
第一个参数 ： 任务名称
第二个参数 ： 依赖的其它任务 （可以省略） 是一个数组
第三个参数 ： 回调函数

布置好default任务后，再次运行gulp命令，会自动输出 default任务

也可以布置自定义任务 ，比如布置一个 say 任务 ， 可以使用 gulp say 执行该任务

如果一次执行多个任务，可以在task的第二个参数上 通过一个数组指定

6、其它方法
src() 获取源文件路径
参数 ： 可以是一个字符串 或 一个数组

dest() 获取目标文件的路径
参数 ： 是一个字符串 该方法可以自动生成目录

pipe() 管道方法 表示 下一步

watch() 监听方法

//watch 方法 监听方法
//参数一 ：监听文件的路径
//参数二 ： 某个任务 是一个数组

 

//引入  gulp 模块化  
var gulp = require("gulp");

//引入插件
var sass = require("gulp-sass");//将sass文件转成css  
var concat = require("gulp-concat");//合并文件   提供参数
var cssmin = require("gulp-cssmin");//压缩css
var imgmin = require("gulp-imagemin");//压缩图片
var rename = require("gulp-rename");//重命名  提供参数
var uglify = require("gulp-uglify");//压缩js文件

//压缩图片 压缩images目录下的所有图片 并生成到img目录下
gulp.task( "imgmin" , function(){
    return gulp.src("images/*")
               .pipe( imgmin() )
               .pipe( gulp.dest( "img" ) );
} )    


//将src目录下的所有js文件合并  合并后压缩  并重命名
gulp.task( "concat" , function(){
    return gulp.src( "src/*.js" )
               .pipe( concat( "all.js" ) )
               .pipe( uglify() )
               .pipe( rename("all.min.js") )
               .pipe( gulp.dest("src") );
} )

//布置任务  将src目录下的sport5.js文件 压缩 并重命名 sport.min.js  最后输送到 dest的js目录下
gulp.task( "uglify" , function(){
    return gulp.src("src/sport5.js")
               .pipe( uglify() )
               .pipe( rename("sport.min.js") )
               .pipe( gulp.dest( "dest/js" ) )
} )
//布置任务  将css目录下的index.scss文件转成 css文件   生成到css目录下
gulp.task( "sass" ,function(){
    return gulp.src( "css/index.scss" )
               .pipe( sass() )
               .pipe( gulp.dest("css") );
} )    

//压缩css目录下的css文件  并重命名 index.min.css
gulp.task( "rename" , function(){
    return gulp.src("css/index.css")
               .pipe( cssmin() )
               .pipe( rename("index.min.css") )
               .pipe( gulp.dest("css") )
})    

//布置任务  使用task方法
//default 任务
gulp.task("default",function(){
    console.log("default任务执行");
})


//布置一个say任务  
gulp.task( "say" , function(){
    console.log("say任务执行");
} )


//布置一个dance任务
gulp.task( "dance" ,["say","default"], function(){
    console.log( "dance任务执行" );
} )

//布置任务
// 将src目录中的index.html文件 复制到 dest目录下
gulp.task( "copyHtml" , function(){
    return gulp.src("src/index.html")
               .pipe( gulp.dest("dest/html") );
} )


//将src下面的所有js文件和css文件 复制到 dest目录中的lib目录下
gulp.task( "copyJs" , function(){
    return gulp.src( [ "src/*.js" , "src/*.css" ] )
               .pipe( gulp.dest( "dest/lib" ) );
} )


//将src下 的所有文件（除了js文件）复制到dest目录下面的all目录中   
//  src/*  表示src下面的所有文件
//  src/**/* 表示src下面的所有目录和目录下的所有文件
// !src/*.js  除了 src下面的所有js文件
gulp.task( "copyCss" , function(){
    return gulp.src( ["src/*","!src/*.js"] )
               .pipe( gulp.dest( "dest/all" ) );
} )


//watch 方法  监听方法
//参数一 ：监听文件的路径
//参数二 ： 某个任务   是一个数组
//布置任务，功能 监听src下面的index.html内容变化，
//如果内容发生变化，就将index.html复制到dest的html目录中
gulp.task( "watchHtml",function(){
    return gulp.watch( "src/index.html" , ["copyHtml"] );
} )