gulp安装以及使用

gulp.js是什么？

gulp.js是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。

gulp.js优势

• 易于使用
  通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。
• 构建快速
  利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。
• 插件高质
  Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。
• 易于学习
  通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。

gulp安装

全局安装gulp

$ npm install --global gulp

安装package.json文件

$ npm init

项目内安装gulp

$ npm install gulp --save-dev

也可以在package.json文件添加代码再 npm install进行安装

安装其他gulp插件

• 合并
  gulp-concat 合并文件
• 压缩
  gulp-minigy-html 压缩html
gulp-minify-css 压缩css
gulp-uglify 压缩js
gulp-imagemin 压缩图片
• 编译
  gulp-less 将less编译成css
gulp-sass 将scss编译成css
gulp-babel 将ES6编译成ES5
  …..

新建gulpfile.js文件

编写任务处理代码

gulp使用

打开gulpfile.js文件，编写任务处理代码

    var gulp = require('gulp');//引入gulp
    //创建任务，终端输入"gulp taskname1" 运行 taskname1
    gulp.task('taskname1',function（）{
        return console.log("this is taskname1!");
    });
    gulp.task('taskname2',function(){
        return console.log("this is taskname2!");
    })
    //创建多任务，终端直接输入gulp运行taskname1和taskname2
    gulp.task('default',['taskname1','taskname2']);

copyhtml代码

    var gulp = require('gulp');
    gulp.task('copyhtml',function(){
    //把src/下的所有html文件，copy到dist文件夹里面
        gulp.src('src/*.html')
            .pipe(gulp.dest('dist'));
    });

$ gulp copyhtml

压缩图片

    var gulp = require('gulp');
    var imagemin = require('gulp-imagemin');
    gulp.task('imageMin',function(){
    //把src/images/中的所有图片进行压缩，然后输出到dist/images文件夹里
        gulp.src('src/images/*')
            .pipe(imagemin())
            .pipe(gulp.dest('dist/images');
    })

$ gulp imageMin

文件监听

    var gulp = require('gulp');
    gulp.task('watch',function(){
        gulp.watch('src/*.html',['copyhtml']);
        gulp.watch('src/images/*',['imageMin']);
    });

$ gulp watch

多任务处理

    gulp.task('default',['copyhtml','imageMin','watch']);

$ gulp

常用的gulp方法

• gulp.task() 定义任务
• gulp.src() 需要执行任务的文件
• gulp.dest() 执行任务后文件的去处

• gulp.watch() 观察文件是否发生变化

  利用none中的pipe进行输入输出操作，把 pipe()左边的放到pipe（里面）