前端gulp笔记

gulp总结笔记

1.前端开发：nvm和node的用法 NPM解决代码部署的问题
https://www.cnblogs.com/gaozejie/p/10689742.html 很好的总结了关系
2.gulp前端自动化流程的工具（自动完成压缩等为css和js文件，配置完关心样式即可 比如css 运行自动生成压缩成.min.css）
创建包管理环境安装gulp
npm init 生成一个package.json文件(里面记录项目安装了哪些依赖包)，别人根据npm install即可安装
全局安装 npm install gulp -g
局部安装 npm install gulp --save-dev --save-dev参数会将安装的包添加到package.json文件的devDependencies
创建任务 先导包reqire
var gulp = require(“gulp”); #导包
gulp.task(“greet”,function(){ #任务(任务名，函数(){操作})
console.log(“hello word”);
});
运行：在相应的项目下 gulp 任务名（gulp greet）
3.用gulp去处理css文件(需要插件gulp-cssnano)
安装 npm install gulp-cssnano --save-dev
使用 gulp.task(‘css’, function(){
gulp.src(’./css/.css’) #读取css文件夹下的所有css文件
.pipe(cssnano()) #将读取到的放到管道交给cssnano去执行
.pipe(gulp.dest(’./dist/css/’)) #存放到指定地址 dest():存放地址
}); # ；不可少
4.给文件改名字 189有gulp-rename插件的详细网址
var rename = require(‘gulp-rename’); 导包
gulp.task(‘rcss’, function(){
gulp.src(’./css/.css’)
.pipe(cssnano())
.pipe(rename({‘suffix’:’.min’})) //后缀suffix 1.css 变为 1.min.css
.pipe(gulp.dest(’./dist/css’))
});
5.处理js文件的压缩 用到uglify插件
var uglify = require(‘gulp-uglify’);
gulp.task(‘js’,function(){
gulp.src(’./js/*.js’)
.pipe(uglify({
‘toplevel’:true, //2顶级区块压缩
‘compress’:{
‘drop_console’:true //3console语句也压锁
}
})) //压缩 toplevel顶级区域块压缩
.pipe(rename({‘suffix’:’.min’}))
.pipe(gulp.dest(’./dist/js’))
});
=========================================4.5
6.gulp合并多个文件，插件gulp-concat
导包 var concat = require(‘gulp-concat’)
查找出文件路径，并通过concat(url)将文件保存到一个新的文件中，在压缩
gulp.task(‘jss’, function(){
gulp.src(’./js/.js’)
.pipe(concat(‘index1.min.js’))
.pipe(uglify())
.pipe(gulp.dest(’./dist/js’))
});
7.压缩图片gulp-imagemin，gulp-cache
导包 var imagemin = require(‘gulp-imagemin’)
var cache = require(‘gulp-cache’)
查找符合的，缓存（在进行压缩(只能是原图)）
gulp.task(‘image’, function(){
gulp.src(’./image/.’)
.pipe(cache(imagemin()))
// .pipe(rename({‘suffix’:’.min’}))
.pipe(gulp.dest(’./dist/image’))
});
8.监听不需要插件，用watch就好
gulp.task(‘watch’, function(){
gulp.watch(’./css/.css’,gulp.series(“rcss”)) //一旦有css文件改变，就会触发rcss上边的gulp完成压缩
gulp.watch(’./js/*.js’,gulp.series(“js”)) 监听的js gulp.series(“js”)：如果有js边，就会触发任务js的代码，实现压缩
});
9.文件保存，自动刷新浏览器 browser-sync
导包 var bs = require(‘browser-sync’).create(); //create()创建服务器（服务器会控制浏览器）
进行初始化，bs.stream():加载当前页面
gulp.task(‘bs’,function(){
bs.init({
‘server’:{
‘baseDir’:’./’
}
})
});
gulp.task(‘server’,gulp.series(‘bs’,‘watch’)) //运行server之前，运行bs和watch的任务(watch任务会自动监听的设备)

//gulp.series|4.0 依赖顺序执行
//gulp.parallel|4.0 多个依赖嵌套'html','css','js'并行

代码

需要先创建一个gulpfile.js文件

var gulp = require("gulp");
var cssnano = require('gulp-cssnano');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var bs = require('browser-sync').create();  //create()创建服务器
var concat = require('gulp-concat');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');

gulp.task("greet",function(){
	console.log("hello word");
});

//css压缩处理
gulp.task('css', function(){
	gulp.src('./css/*.css')
	.pipe(cssnano())
	.pipe(gulp.dest('./dist/css/'))
});

//改名 gulp-rename
gulp.task('rcss', function(){
	gulp.src('./css/*.css')
	.pipe(cssnano())
	.pipe(rename({'suffix':'.min'}))  
	.pipe(gulp.dest('./dist/css'))
	.pipe(bs.stream())  //加载当前页面
});

//处理js的压缩（gulp-uglify） 可以查看uglify的插件
gulp.task('js',function(){
	gulp.src('./js/*.js')
	.pipe(uglify({
	    'toplevel':true,   //顶级区块压缩
        'compress':{        
        	'drop_console':true  //console语句也压锁
        }
	}))  //压缩  toplevel顶级区域块压缩
	.pipe(rename({'suffix':'.min'}))
	.pipe(gulp.dest('./dist/js'))
});

// 合并多个文件，减少请求次数gulp-concat
// 安装：npm install gulp-concat --save-dev

gulp.task('jss', function(){
	gulp.src('./js/*.js')
	.pipe(concat('index1.min.js'))
	.pipe(uglify())
	.pipe(gulp.dest('./dist/js'))
});

// 压缩图片(图片也影响加载速度,还得保证不损坏图片失真)gulp-imagemin  还得需要gulp-cache(缓存压缩过的)
// 只压缩未处理过的图片

gulp.task('image', function(){
	gulp.src('./image/*.*')
	.pipe(cache(imagemin()))
	// .pipe(rename({'suffix':'.min'}))
	.pipe(gulp.dest('./dist/image'))
});

// watch监听，不用任何插件，可以监听css，js，image等
gulp.task('watch', function(){
	gulp.watch('./css/*.css',['rcss']) //gulp.series("rcss") 一旦有css文件改变，就会触发rcss上边的gulp完成压缩
});
// gulp Error 错误没有function()因为require导包版本不同所致
// 解决：一个修改package.json的dev文件的版本，第二gulp.series('触发的任务')

// 更改文件后，自动更新浏览器
// 安装：npm install browser-sync --save-dev
gulp.task('bs',function(){
	bs.init({
		'server':{
			'baseDir':'./'
		}
	})
});

gulp.task('server',['bs','watch']) ; //gulp.series('bs','watch') 运行server之前，运行bs和watch的任务(watch任务会自动监听的设备)