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任务会自动监听的设备)

代码

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