Gulp

简介

工程化工具

作用：

实现代码部署
css，JS，html代码压缩
ES6，less，styls代码编译
图片优化
...

原理：
基于unix中管道概念，stream流，前一个操作的输出作为后一个操作输入。

Gulp入口文件

gulpfile.js 每个项目中都需要有这个文件，当执行gulp会自动执行该文件。

task()

定义一个任务
gulp.task(name, [deps], fn);
参数1： name任务的名称
参数2： deps依赖的任务, 依赖的任务要先于当前任务执行.
参数3： fn任务的回调函数

// 开启任务
gulp.task('zf', function () {
    
});

// 启动任务
gulp.task('default', ['zf']);

顺序执行任务，需要添加依赖.

src()

将文件转换成stream流
gulp.src(filePath, options);
参数1：filePath 文件路径，如果存在不同的文件，有两种方式表示

* 数组： ['a.js', 'b.css']
* globs表达式： ['.js']  // 表示 a.js aa.js abc.js 注意不能够有目录符.

gulp.src('js/index.js')

pipe()

处理每个阶段的流.
这些管道依次排开，前一个管道输出作为后一个管道的输入,从而控制流向.

Stream
复杂的加工过程分割成一系列独立的工序，这些工序可以反复被使用，在需要的时候还可以替换和重组.

dest()

将文件写入某个目录或者文件中
gulp.dest(path);

// 开启任务
gulp.task('zf', function () {
    
    // 创建流
    var stream = gulp.src('js/index.js');
    
    // 写入位置
    var pos = gulp.dest('test');
    
    // 管理状态
    stream.pipe(pos);
    
});

// 启动任务
gulp.task('default', ['zf']);

文件监听

watch()，监听文件的变化.
文件变化的条件：写入，修改，删除，发生一个操作:保存文件。

用法1：
watch(globs, fn);
参数1：文件的globs路径表示
参数2：回调函数，回调函数中的参数： type->表示操作的类型 changed,deleted,added. path->操作的文件路径

gulp.watch('js/*.js', function ( ev ) {
    
    // 流
    var stream = gulp.src('js/*.js');
    
    // 写入位置
    var pos = gulp.dest('test');
    
    // 管理流 状态
    stream.pipe(pos);
    
});


gulp.task('default');

用法2：
gulp.watch(globs, deps);
参数1：文件的路径
参数2： deps任务(task)集合

// 多个状态
gulp.task('zf', function () {
    
    // 流 
    var stream = gulp.src('js/*.js');
    
    // 写入位置
    var pos = gulp.dest('test');
    
    // 管理流
    stream.pipe(pos);
    
});

gulp.task('default'); 

gulp.watch('js/*.js', ['zf']);

globs

* 表示任意字符(除了目录符号,不能包括扩展名)
** 表示任意字符(可以包括目录符号，不能包括扩展名)
混合使用：**/*.js 包含所有js文件。 lib/**/*.js 表示lib文件下所有js文件

*.js：* 号匹配当前目录任意文件. *.js匹配当前目录下所有的js文件
**/*.js : 匹配当前目录及其子目录下的所有js文件
!mian.js : ! 号移除匹配的文件，这里移除 mian.js
*.+(js|json): +号后面跟着圆括号，里面的元素用| 分割，匹配多个选项。这边将匹配js文件和json文件
{} ：匹配多个属性例如：src/{a,b}.js 包含a.js和b.js文件。 src/*.{jpg,png,gif} src下所有的jpg/png/gif文件

插件

npm gulp 插件 gulp-插件
gulp 官方插件 gulp-官方插件

文件重命名

gulp-rename
rename(); 参数：重命名的文件新名字
npm install gulp-rename

var gulp = require('gulp');

var rename = require('gulp-rename');


gulp.task('renameJs', function () {
    
    var stream = gulp.src('js/*.js');
    
    // 位置
    var desc = gulp.dest('test');
    
    // 修改名字
    var name = rename('app.js');
    stream.pipe(name);
    
    // 监听流
    stream.pipe(desc);
    
});

gulp.task('default', ['renameJs']);

JS压缩

gulp-unlify
npm install gulp-unlify

var gulp = require('gulp');

var uglify = require('gulp-uglify');

gulp.task('unlifyJs', function () {
    
    // 流
    var stream = gulp.src('js/**/*.js');
    
    // 位置
    var pos = gulp.dest('test/js');
    
    // 压缩
    stream.pipe(uglify())
    // 监听流
    .pipe(pos);    
    
});

gulp.task('default', ['unlifyJs']);

CSS压缩

压缩CSS
gulp-minify-css 和 gulp-clean-css
npm install gulp-minify-css

var gulp = require('gulp');
var minfiyCss = require('gulp-minify-css');


// 开启任务
gulp.task('lockCss', function () {
    
    // 流
    var stream = gulp.src('css/*.css');
    
    // 位置
    var pos = gulp.dest('test/css');
    
    // 压缩
    stream.pipe(minfiyCss())
    // 管理流
    .pipe(pos);
    
});

gulp.task('default', ['lockCss']);

HTML压缩

gulp-minify-html

gulp.task('lockHtml', function () {
    
        var stream = gulp.src('*.html');
        
        var pos = gulp.dest('test');
        
        stream.pipe(miniyHtml())
        .pipe(pos);
        
});
gulp.task('default', ['lockHtml']);

文件合并

gulp-concat

concat();
参数：文件合并后的文件名

// 合并文件 
gulp.task('concatFs', function () {
    
    // 流
    var stream = gulp.src('js/**/*.js');
    
    // 合并文件
    stream.pipe(concat('main.js'))
    // 压缩文件
    .pipe(uglify())
    // 监听流
    .pipe(gulp.dest('test/js'));
    
});

gulp.task('default', ['concatFs']);

语法校验

js语法校验
gulp-jslint

var gulp = require('gulp');
var jslint = require('gulp-jslint');

// 校验js中的代码
gulp.task('jslint', function () {

    var stream = gulp.src('js/index.js');
    
    // 先校验
    stream .pipe(jslint())
    .pipe(gulp.dest('demo'))
    
});

// 启动任务
gulp.task('default', ['jslint']);

图片压缩

gulp-imagemin
压缩：gif，jpg，png 等常用类型图片格式

如果报错找不到需要依赖模块，手动npm拉去文件：
imagemin-gifsicle
imagemin-jpegtran
imagemin-optipng

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');

// 创建任务
gulp.task('dealImg', function () {

    gulp.src('img/*.*')
    // 压缩图片
    .pipe(imagemin())
    .pipe(gulp.dest('demo'))
    
});

// 启动任务
gulp.task('default', ['dealImg']);

增加前缀

gulp-autoprefixer
测试过程中使用autoperfixer执行失败
var autoperfixer = reuqire('gulp-autoprefixer');

// 加CSS前缀
gulp.task('atuo', function () {

gulp.src('css/css.css')
    .pipe(prefixer())
    .pipe(gulp.dest('dist'));

});
gulp.task('default', ['atuo']);

编译Less，Sass

插件：gulp-less
插件：gulp-sass

// 编译Less文件
gulp.task('atuo', function () {
    
    gulp.src('**/*.less')
        .pipe(less())
        .pipe(gulp.dest('test'));
    
});

// 编译Sass文件
gulp.task('atuo', function () {
    
    gulp.src('**/*.sass')
        .pipe(sass())
        .pipe(gulp.dest('test'));
    
});

gulp指令

gulp // 执行文件
gulp 任务名称 // gulp atuo;

gulpfile

var gulp    = require('gulp'),
    jshint    = require('gulp-jshint'),
    sass    = require('gulp-sass'),
    concat    = require('gulp-concat'),
    uglify    = require('gulp-uglify'),
    rename    = require('gulp-rename'),
    imagemin    = require('gulp-imagemin'),
    minifycss    = require('gulp-minify-css'),
    livereload    = require('gulp-livereload'),
    connect    = require('gulp-connect');
 
// 检查脚本
gulp.task('lint', function(){
    gulp.src('./src/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

// 编译Sass
gulp.task('sass', function(){
    gulp.src('./src/sass/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./dist/css'));
});

// 合并，压缩js
gulp.task('scripts', function(){
    gulp.src('./src/js/*.js')
        // .pipe(concat('all.js'))
        .pipe(gulp.dest('./dist/js'))
        // .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js'))
        .pipe(connect.reload());
});

// 压缩图片
gulp.task('imagesmin', function(){
    gulp.src('./src/images/*.{png,jpg,gif,ico}')
        .pipe(imagemin({
            optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
            progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
            interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
            multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化
        }))
        .pipe(gulp.dest('./dist/images'))
});

// 监听html
gulp.task('html', function () {
      gulp.src('./src/*.html')
          .pipe(gulp.dest('./dist'))
        .pipe(connect.reload());
});

// 压缩，合并css
gulp.task('css', function() {
    gulp.src('src/css/*.css')
        // .pipe(concat('main.css'))
        // .pipe(gulp.dest('./dist/css'))
        .pipe(rename({ suffix: '.min' }))
        .pipe(minifycss())
        .pipe(gulp.dest('./dist/css'))
        .pipe(connect.reload());
});

// 监听
gulp.task('watch', function(){
    gulp.watch('./src/js/*.js', ['lint', 'scripts']);
    gulp.watch('./src/css/*.css', ['css']);
    gulp.watch('./src/*.html', ['html'])
});

// server
gulp.task('connect', function () {
  connect.server({
    root: './dist',
    livereload: true
  });
});

// 其他任务
gulp.task('release', ['html', 'lint','scripts','sass','css','imagesmin']);

// 默认任务
gulp.task('default', ['release', 'connect', 'watch']);

简介