Gulp组件化构建项目

一、Gulp简介

gulp是前端开发过程中对代码进行构建的工具，基于Nodejs的自动任务运行器，对文件进行检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，大大提高我们的工作效率。

二、步骤：

大体的步骤如下：安装gulp-->相关插件的安装-->构建项目-->运行并查看效果

1. 安装gulp

1.1. 安装Nodejs：

安装完后打开命令窗口输入node -v就能查看nodejs是否安装成成功

1.2 选装cnpm:

因npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，安装淘宝镜像 找到Node.js 文档镜像:

npm install -g cnpm --registry=https://registry.npm.taobao.org

npm install

注：cnpm跟npm用法一样，在执行命令时将npm改为cnpm即可

1.3 gulp安装

全局安装：

npm install -g gulp

全局安装后，还需在每个项目中单独安装一次 npm install gulp

注意：把gulp写进项目package.json文件的依赖中则加上--save-dev

2. 相关插件的安装

2.1 常见插件

autoprefixer   //自动添加css前缀
gulp-clean      //清空文件夹
gulp-concat     //合并文件
gulp-notify    //更改提醒 
gulp-rename    //改变文件名
gulp-less     //将less编译成css文件  
gulp-uglify   //压缩js
 
gulp-jshint   //js代码校验 
gulp-minify-css  //压缩css
gulp-livereload   //自动刷新页面

注：快速安装这些插件的命令：

$ npm install autoprefixer gulp-clean 
gulp-concat  gulp-notify  gulp-rename  gulp-less  gulp-uglify  gulp-jshint  gulp-minify-css  gulp-livereload --save-dev

2.2 构建项目

2.2.1 在构建项目之前，需要先了解几个gulp命令

1）定义任务：gulp.task(name[,deps],fn) name 任务名称 deps:依赖任务名称   fn:回调函数
2）gulp.watch(glob,fn) 当glob内容发生变化时，执行fn
3) gulp.src(path) 需处理的源文件路径，多文件时可以是数组或正则的形式
4）gulp.dest(path) 编译后生成文件的路径

2.2.2 在根目录新建一个gulpfile.js文件，引用插件

//例如引用gulp和gulp-clean插件
var gulp =require('gulp');
var clean = require(gulp-clean);

//清空目录
gulp.task(clean,function(){
    return gulp.src([
        paths.app.root
    ])
    .pipe(clean())
    .pipe(notify('文件已清空!')
});

2.2.3 完整的gulpfile.js

'use strict';  //js严格模式


//引入插件

var gulp = require('gulp'),
    less = require('gulp-less'),
    cssnano = require('gulp-cssnano'),
    cssBase64 = require('gulp-css-base64'),
    clean = require('gulp-clean'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    autoprefixer = require('gulp-autoprefixer'),
    nunjucksRender = require('gulp-nunjucks-render'),
    notify = require("gulp-notify"),
    browserSync = require('browser-sync').create(),
    reload = browserSync.reload;


// 环境变量

var paths = {
    root: "./",
    src: {
        root:       "src/",
        less:       "src/less/",
        js:         "src/js/",
        images:     "src/images/",
        templates:  "src/templates/",
        pages:      "src/pages/",
        css:        "src/css/",
        fonts:      "src/fonts/"
    },
    app: {
        root:       "app/",
        css:        "app/css/",
        images:     "app/images/",
        js:         "app/js/",
        fonts:      "app/fonts/"
    }
};


// 默认任务

gulp.task('default', ['clean', 'styles', 'scripts', 'assets', 'layouts']);


// 清空目录

gulp.task('clean', function () {
    return gulp.src([
            paths.app.root
        ])
        .pipe(clean())
        .pipe(notify("文件已清空."))
});


// 样式文件构建

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

    gulp.src( [paths.src.less + 'style.less'] )
        .pipe(less())
        .pipe(autoprefixer({
            browsers: ['last 30 versions'] //['chrome 32']
        }))
        .pipe(cssBase64({
            extensionsAllowed: ['.gif', '.png', '.svg']
        }))
        .pipe(gulp.dest(paths.app.css))
        .pipe(cssnano())
        .pipe(rename("style.min.css"))
        .pipe(gulp.dest(paths.app.css))
        .pipe(notify("styles合并完成."))
        .pipe(reload({stream: true}));

});


// 脚本构建

gulp.task('scripts', function () {
    return gulp.src(paths.src.js + 'custom.js')
            .pipe(gulp.dest(paths.app.js))
            .pipe(uglify())
            .pipe(rename("custom.min.js"))
            .pipe(gulp.dest(paths.app.js))
            .pipe(notify("scripts合并完成."));
});


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

    gulp.src(paths.src.js + 'vendors/**/*')
        .pipe(gulp.dest(paths.app.js));

    gulp.src(paths.src.fonts + '**/*')
        .pipe(gulp.dest(paths.app.fonts));

    gulp.src(paths.src.css + '**/*')
        .pipe(gulp.dest(paths.app.css));

    gulp.src(paths.src.images + '**/*')
        .pipe(gulp.dest(paths.app.images));
});


//页面构建

gulp.task('layouts', function () {
    return gulp.src( paths.src.pages + '**/*.html')
        .pipe(nunjucksRender({
            path: [paths.src.templates] // String or Array
        }))
        .pipe(gulp.dest(paths.app.root))
        .pipe(notify("页面渲染完成."));
});

gulp.task('js-watch', ['scripts'], reload);
gulp.task('js-layouts', ['layouts'], reload);


// 即时服务器
 
gulp.task('serve', function () {
    browserSync.init({
        server: {
            baseDir: paths.app.root
        }
    });

    gulp.watch([paths.src.less + '**/*.less'], ['styles']).on('change', browserSync.reload);
    gulp.watch([paths.src.js+ '**/*.js'], ['js-watch']).on('change', browserSync.reload);
    gulp.watch([paths.src.pages + '**/*.html', paths.src.templates + '**/*.html'], ['js-layouts']).on('change', browserSync.reload);
});

2.3 项目目录结构示意图

project(项目名称)
|–.git 通过git管理项目会生成这个文件夹
|–node_modules 组件目录
|–app 发布环境
    |–css 样式文件(包括style.css style.min.css)
    |–images 图片文件(已压缩的图片)
    |–js js文件(包括custom.js custom.min.js)
    |–index.html 静态文件
|–src 生产环境
    |–less less
    |–images 图片文件
    |–js js文件
    |–pages 静态html文件
    |–templates (包括master.html)
|–gulpfile.js  gulp任务文件
|–package.json  json文件

注：进入文件目录后可通过命令快速建目录

mkdir app/ app/less app/images app/pages app/templates