gulp安装与使用

全局安装

npm install gulp-cli@2.3.0 -g

运行gulp -v查看是否安装成功

 创建gulp文件夹，执行命令为项目安装gulp

npm install gulp@4.0.2 --save-dev
// 查看gulp版本，查看是否安装成功
gulp -v

 在根目录下新建gulpfile.js文件，并在文件中编写任务

var gulp = require('gulp')
gulp.task('default',function(){
	console.log('hello')
})

执行gulp命令，输入hello

gulp API 常用的方法：

方法	说明
gulp.src()	获取任务要处理的文件
gulp.dest()	输出文件到哪个目录下
gulp.task()	建立gulp任务
gulp.watch()	监控文件的变化

gulp中常用的插件

压缩js

//执行命令
npm install gulp-uglify

//gulpfile.js中代码，将src中的js压缩到dist中js文件夹
var gulp = require('gulp')
var jsUglify = require('gulp-uglify')

gulp.task('default',function(){
	gulp.start("jsuglify")
})

gulp.task("jsuglify",function(){
	gulp.src("src/js/*.js")
	.pipe(jsUglify())
	.pipe(gulp.dest("dist/js"))
})

//项目下执行命令
gulp或gulp jsuglify

压缩css

npm install gulp-cssmin

var gulp = require('gulp')
//压缩css
var cssUglify = require("gulp-cssmin")

gulp.task("cssmin",function(){
	gulp.src("src/css/*.css")
	.pipe(cssUglify())
	.pipe(gulp.dest("dist/css"))
})

//执行命令
gulp cssmin

压缩图片

npm install gulp-iamgemin

var image = require("gulp-iamgemin")

//压缩图像任务
gulp.task ("imagemin",function(){
    gulp.src ("src/images/*.{png, jpg, gif, ico, jpeg, svg}")
    .pipe(image({
        progressive:true,//压缩无损图片
        multipass:true//多次优化svg,直到完全优化
    })
    .pipe(gulp.dest("dist/img"))
})