gulpfile.js:

var gulp = require("gulp");

var imagemin = require("gulp-imagemin");//压缩图片插件

var uglify = require("gulp-uglify");   //js压缩插件

var sass = require("gulp-sass");      //sass转换为css插件

var concat = require("gulp-concat"); //代码合并插件

-----------------------------------------------------------------------

gulp能做什么:（下面是罗列最基本的）

-----------------------------------------------------------------------

1...压缩代码

2...合并代码

3...压缩图片

4...sass转换

-----------------------------------------------------------------------

原理：

1...gulp是基于nodejs的数据流

2...gulp主要使用pipe事件输入输出

3...插件独立使用

-----------------------------------------------------------------------

优势：

1...gulp是基于代码进行配置

2...gulp的可读性更高

3...gulp基于数据流，所以可以操作pipe（）事件

-----------------------------------------------------------------------

安装

cnpm install gulp -g

-----------------------------------------------------------------------

npm init

一直回车；

gulpfile.js 和packjson.js同级

-----------------------------------------------------------------------

常用的方法：

gulp.task     //定义任务

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

gulp.dest   //执行任务的文件的去处

gulp.watch //观察问是否发生变化

//定义默认任务

gulp.task("default",function(){

   return console.log("这是默认任务,只需要执行gulp")

})

//执行任务cmd 命令行gulp

-----------------------------------------------------------------------

gulp.task("message",function(){

   return console.log("这是制定任务")

})

//执行任务cmd 命令行gulp message

-----------------------------------------------------------------------

//拷贝文件

gulp.task("copyHtml",function(){

   gulp.src("src/*.html")             //src所有html

    .pipe(gulp.dest("dist"))     //输送到dist文件夹下

})

//执行任务cmd 命令行gulp copyHtml 这样就完成了文件拷贝

-----------------------------------------------------------------------

//图片压缩

cnpm i gulp-imagemin

gulp.task("imageMin",function(){

   gulp.src("src/images/*")                //src/images所有的东西

    .pipe(imagemin())                   //调用上面的方法

    .pipe(gulp.dest("dist/images"))  //输送到dist/images文件夹下

})

//执行任务cmd 命令行gulp imageMin 这样就完成了图片压缩

-----------------------------------------------------------------------

//压缩js文件

cnpm i gulp-uglify

gulp.task("minify",function(){

   gulp.src("src/js/*.js")                 //src/js所有的js

    .pipe(uglify())               //调用上面的方法

    .pipe(gulp.dest("dist/js"))      //输送到dist/js文件夹下

})

//执行任务cmd 命令行gulp minify 这样就完成了js压缩；

-----------------------------------------------------------------------

//sass转换为css

cnpm i gulp-sass

gulp.task("sass",function(){

   gulp.src("src/sass/*.scss")                    //src/sass所有的scss文件

    .pipe(sass().on("erro",sass.logError))   //调用上面的方法,并且打印错误；

    .pipe(gulp.dest("dist/css"))            //输送到dist/css文件夹下

})

//执行任务cmd 命令行gulp sass 这样就完成了sass转换为css；

-----------------------------------------------------------------------

//代码合并

cnpm i gulp-concat

gulp.task("concatScripts",function(){

   gulp.src("src/js/*.js")                 //src/js所有的js

    .pipe(concat("main.js"))          //合并之后的文件名；

    .pipe(uglify())                  //压缩js；如果这里做了合并代码的操作可以不用单独压缩js文件

    .pipe(gulp.dest("dist/js"))      //输送到dist/js文件夹下

})

//执行任务cmd 命令行concatScripts

-----------------------------------------------------------------------

//监听文件是否变化

gulp.task("watch",function(){

  gulp.watch("src/js/*.js",["concatScripts"]);

  gulp.watch("src/images/*",["imageMin"]);

  gulp.watch("src/sass/*.scss",["sass"]);

  gulp.watch("src/js/*.html",["copyHtml"]);

})

//执行任务cmd 命令行gulp watch

-----------------------------------------------------------------------

//执行多个任务

gulp.task("default",[任务一，任务二，任务三....])

//执行任务cmd 命令行gulp