gulp介绍
- 是一款nodejs应用
- 打造前段工作流的利器，打包，压缩，合并，git，远程操作
- ......
gulp常见问题
1，安装
npm install gulp-cli -g 全局安装
npm install gulp -D 在当前目录下安装（这样才能require到，全局是require不到的，详情见npm）
touch gulpfile.js 创建gulpfile.js文件
gulp --help 查看指令
- gulpfile.js
var gulp = require('gulp');
var pug = require('gulp-pug'); //模板文件 生成html
var less = require('gulp-less'); //将less转化为css
var minifyCSS = require('gulp-csso'); //压缩css
gulp.task('html',function () { //基床上定义了一个事件叫html
return gulp.src('client/templates/*.pug') //会把当前src下面的所有的.pug文件输进去(物料)
.pipe(pug()) // 然后通过pipe()变成数据流 传给pug() 处理之后又传给后面的进行pipe
.pipe(gulp.dest('build/html')) // 后面不需要处理了 就直接把它输出成html
});
// 定义好之后 只需要命令行执行 gulp html 就会执行这个事情
//同理 也可以定义事件css 将less文件转换为css并且压缩
gulp.task('css',function () {
return gulp.src('client/templates/*.less')
.pipe(less())
.pipe(minifyCSS())
.pipe(gulp.dest('build/css'))
});
// 定义事件default 直接简写 直接命令行执行 gulp 就会执行这个default事件，然后由于这个任务里面有html css两个任务 就会都执行
gulp.task('default',['html','css']);
gulp使用
具体使用举例1：（合并css文件）
文件夹结构如图
1.png
要将src文件夹下的几个css文件合并并且压缩到dist文件夹下的css中以便发布，具体操作流程如下：
- 1，在demo1下创建gulpfile.js
- 2，在demo1下创建package.json(可以通过npm init)
- 3，运行npm install gulp --save-dev或者（-D）来在本地添加gulp使得我们可以在gulpfile.js中require到gulp，完成后package.json中出现"devDependencies"。
- 4，这样就可以在gulpfile.js中var gulp = require('gulp');了，另外我们还需要cssnano（将css压缩）和concat（文件合并）两个插件,同样的，我们进行插件的安装
npm install gulp-cssnano --save-dev
npm install --save-dev gulp-concat - 5,进行gulpfile.js的书写
首先介绍gulp的几个重要方法
gulp对象的4个方法
具体使用见API文档 - gulp其实就是一个对象，其实只有gulp.src/gulp.dest/gulp.task/gulp.watch四个方法
- gulp.src的作用就是需要去处理哪些文件
- gulp.dest的作用就是输出文件
- gulp.task 创建一个任务 一个任务可以认为是一个流水线
- gulp.task中的参数中可以传入依赖的其他任务，这些任务是默认并行执行的并且是在当前任务之前执行的
- gulp.watch监测文件的改动
具体gulpfile.js的书写:
- 引入模块跟插件
//本地安装gulp进行开发npm install gulp -D 使得可以require到gulp
var gulp = require('gulp');
//安装2个需要用到的插件
var cssnano = require('gulp-cssnano');
var concat = require('gulp-concat');
- 通过gulp.task创建一个任务，叫做css
gulp.task('css', function() {
// gulp.src('./src/css/*.css') //需要处理的文件是相对于gulpfile.js的路径即当前文件夹下的src/css下的所有的css文件
//如果只想处理common.css和index.css，那么可以写成
gulp.src(['./src/css/common.css','./src/css/index.css']) //这样就得到了数据流
.pipe(concat('index-merge.css')) //将数据流通过pipe传递给下一个工序，这里是concat(),合并css文件并且命名为index-merge.css
.pipe(cssnano())//然后进行压缩
.pipe(gulp.dest('./dist/css')) //然后通过dest输出到指定目录下，这里是dist文件夹下
});
写好之后 可以通过终端 定位到当前目录下 运行gulp 指定task名即可,这里是gulp css
运行之后我们的两个css文件就合并成功了
接着我们可以把剩下的reset.css只进行压缩一下 也放到dist/css下
gulp.task('nanoReset',function () {
gulp.src('./src/css/reset.css')
.pipe(cssnano())
.pipe(gulp.dest('./dist/css'))
})
写好之后运行gulp nanoReset
当然也可以将task名字命名为default 这样运行的时候就直接输入gulp 即可运行 ,例如：
gulp.task('default',function () {
gulp.src('./src/css/reset.css')
.pipe(cssnano())
.pipe(gulp.dest('./dist/css'))
})
或者再创建一个task，名字为default,然后写上gulp.task('default',['css'])最后运行的时候输入gulp即可
具体使用举例2：（实现一个保存代码之后浏览器马上刷新的效果）
用到一个nodejs应用browser-sync
var gulp = require('gulp');
//引入组件
var browserSync = require('browser-sync').create();
var fs = require('fs');
gulp.task('reload',function () { //定义一个任务reload，进行刷新
browserSync.reload();
})
gulp.task('server',function () { //定义一个任务server 启动一个服务器，基准路径是./src
browserSync.init({
server: {
baseDir: "./src"
}
});
gulp.watch(['**/*.css','**/*.js','**/*.html'],['reload']); //监听文件，只要文件发生变化就进行reload任务
})
具体应用举例3（实现css,js,图片的压缩合并等）:
var gulp = require('gulp');
//引入组件
var minifycss = require('gulp-minify-css'), //css压缩
uglify = require('gulp-uglify'), //js压缩
concat = require('gulp-concat'), //合并文件
rename = require('gulp-rename'), //重命名
clean = require('gulp-clean'), // 清空文件夹
minhtml = require('gulp-htmlmin'), // html压缩
jshint = require('gulp-jshint'), //js代码规范性检查
imagemin = require('gulp-imagemin'); //图片压缩
gulp.task('html',function () {
return gulp.src('./src/*.html')
.pipe(minhtml({collapseWhitespace: true}))
.pipe(gulp.dest('dist'))
})
gulp.task('css',function () {
gulp.src('./src/css/*.css')
.pipe(concat('merge.min.css'))
.pipe(renama({
suffix: '.min'
}))
.pipe(minifycss())
.pipe(gulp.dest('dist/css/'));
})
gulp.task('js',function () {
gulp.src('./src/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(concat('merge.js'))
.pipe(rename({
suffix: '.min'
}))
.pipe(uglify())
.pipe(gulp.dest('./dist/js/'))
})
gulp.task('img',function () {
gulp.src('./src/img/*')
.pipe(imagemin())
.pipe(gulp.dest('./dist/imgs'));
})
gulp.task('clear',function () {
gulp.src('./dist/*',{read: false})
.pipe(clean());
});
gulp.task('build',['html','css','js','img']);
运行gulp build，如果需要清空dist内的文件，运行gulp clear
