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
