Gulp入门

Gulp 是什么？

Automate and enhance your workflow

为什么要前端构建？

修改预处理样式后自动编译（less，sass）：gulp-less ，gulp-sass

监听文件变化：gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])；

自动刷新浏览器：gulp-connect

文件合并：gulp-concat

文件压缩：gulp-uglify，gulp-clean-css

代码检查：gulp-jshint，gulp-stylelint

Gulp和webpack 区别?

gulp是工具链、构建工具，可以配合各种插件做js压缩，css压缩，less编译 替代手工实现自动化工作;

webpack是文件打包工具，可以把项目的各种js文、css文件等打包合并成一个或多个文件，主要用于模块化方案，预编译模块的方案;

Gulp实践

构建项目

npm install gulp -g

mkdir gulpTest && cd gulpTest

npm install gulp --save

npm init

touch gulpfile.js

vim gulpfile.js

全局安装gulp和本地安装gulp两次的原因？

全局安装gulp是为了执行gulp任务，本地安装gulp是为了调用gulp插件的功能。

gulpfile.js配置

var gulp =require("gulp");//创建 gulp模块

var less = require('gulp-less'); //创建编译less模块

var connect = require('gulp-connect'); //创建 自动刷新浏览器模块

npm install --save gulp-less gulp-connect 

目录结构：

└── src/  源码目录

    ├── less/     .less 文件

    ├── css/      .css 文件

    ├── js/        .js 文件

    ├── index.html     入口文件

└── package.json

└── gulpfile.js

package.json配置

{

    "name": "gulp-test",

    "version": "1.0.0",

    "description": "",

    "main": "gulpfile.js",

    "scripts": {

        "test": "echo \"Error: no test specified\" && exit 1"

    },

    "author": "",

    "license": "ISC",

    "dependencies": {

        "gulp": "^3.9.1",

        "gulp-connect": "^5.0.0",

        "gulp-less": "^3.3.2",

        "gulp-livereload": "^3.8.1"

    }

}

Gulp的api

gulp.src(globs[, options])

gulp.dest(path[, options])

gulp.task(name[, deps], fn)

gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])

详解gulp.task(name[, deps], fn)

这个API用来创建任务，在命令行下可以输入$ gulp [name]来执行上面的任务。

name：自定义你的任务名称，

[deps]：是一个数组，里面是你定义的其他任务的名称，这些任务会在本次定义的任务之前执行并完成。

fn：是本次任务的回调函数。

举例：

gulp.task('task1',function(){    

    console.log("task1 done");

});

gulp.task('task2',function(){    

    console.log("task2 done");

});

gulp.task('task3',function(){    

    console.log("task3 done");

});

gulp.task('build',['task1','task2','task3'],function(){    

    console.log("build done");

});

执行build任务:gulp build