Gulp组件化构建项目

1、Gulp简介

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

2、步骤：

大致的步骤以下：安装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