前端开发构建工具gulp的安装使用

曾几何时还在使用grunt作为前端的构建工具，直到有一天同事向我推荐了gulp，在这里博主将不讨论gulp与grunt各自优势的比较，只为大家介绍gulp如何安装和使用。

Gulp 是用 nodejs 写的一个前端构建工具，他可以对sass、js、html、coffee等进行编译，并且提供了很多的插件，稍后会为大家介绍。

windows上的安装方法：

2、运行cmd,在全局环境下安装gulp

npm install -g gulp

3、在项目的根目录下新建 package.json 文件

npm init

4、在当前项目目录下运行

npm install --save-dev gulp

注意要有--save-dev ，不然保存不到package.json 中

这样我们的gulp 管理工具就安装完成了。

5、插件安装

　　gulp 在编译时提供了各类的插件。

　　诸如 gulp-sass 、fs 等等下面列表是我在工作中常用的一些插件，并与代码相对应。

npm install path fs gulp-sass gulp-uglify gulp-minify-css gulp-wrapper gulp-replace gulp-webserver --save-dev gulp

这里提供给大家一个网站 https://www.npmjs.com/package/package 可以查到很多gulp 的插件，非常实用。

6、在项目文件夹新建gulpfile.js 插件引用内容如下：

var gulp = require('gulp');
var path = require('path');
var fs = require('fs');

// Plugins
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var minifyCSS = require('gulp-minify-css');
var wrapper = require('gulp-wrapper');
var replace = require('gulp-replace');
var webserver = require('gulp-webserver');

7、gulpfile.js 编译代码

　　gulp 主要提供了

gulp.src
gulp.dest
gulp.pipe

等方法。

编译sass 文件

gulp.task('sass', function() {
    gulp.src([
            'css/**/*.scss',
            '!css/**/_*.scss'
        ])
        .pipe(minifyCSS())
        .pipe(wrapper({
            header: '/* @update: ' + getNowDate() + ' */ \n'
        }))
        .pipe(gulp.dest('build/css'))
});

getNowDate是个自定义的获取当前时间戳的函数。

gulp.src 是路径，! 代表不包括什么类型文件。**可以是多级目录。

如何正确编译？

// 新建 task build
gulp.task('build', function() {
    gulp.run(['css']);
});

好了 gulp就介绍到这里，其他诸如 js coffee html 等等还有各种有趣实用的插件就等客官自己去探索吧！