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的书写:

1. 引入模块跟插件

//本地安装gulp进行开发npm install gulp -D  使得可以require到gulp
var gulp = require('gulp');

//安装2个需要用到的插件
var cssnano = require('gulp-cssnano');
var concat = require('gulp-concat');

2. 通过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