Gulp使用流程

这是一个记录，源于对前端知识的重新认识

由于我是一名后端开发程序猿，虽然会写基本的网页，但是始终没能对前端有一个理论的系统的认识，然而今年对自己定下了全栈开发的小目标，认真的在前端遨游一次！

这次分享的是前端神器----gulp

准备

• 安装node.js
  这个很简单，就不详细说了，直接百度node.js去到官网直接下载，然后傻瓜式安装就行了，它也会帮你自动配置环境变量。安装成功后，打开命令行，输入：node -v， npm -v 即可查看node和npm的版本号。

• 新建项目demo
  项目结构为：
  /src
  /dist

• 安装gulp

1. 打开命令行输入：npm install gulp -g 全局安装gulp
2. 并在demo目录下运行：npm init 初始化项目生成package.json文件
3. 再运行：npm install gulp --save-dev 在项目中安装gulp(--save-dev命令会将gulp声明到package.json文件中的devDependencies中)

• 这里以gulp的插件gulp-file-include为例

1. 和安装gulp类似，运行： npm install gulp-file-include --save-dev

2. 在根目录下新建glupfile.js文件，放入以下代码：
   var gulp = require('gulp');
   var fileinclude = require('gulp-file-include');

     gulp.task('fileinclude', function () {
           gulp.src('src/**.html')
           .pipe(fileinclude({
           prefix: '@@',
           basepath: '@file'
           }))
           .pipe(gulp.dest('dist'));
     })
   

• 小试gulp

1. 在src目录中新建public文件夹、index.html文件，并在public文件夹下新建header.html
2. 在index.html中写上
   @@include('public/header.html')
3. 在header.html中写上
   <h1>内容来自header.html</h1>
4. 运行gulp fileinclude 打开dist文件夹，不出意外，会出现一个index.html文件，在浏览器中打开它，如果成功，“内容来自header.html”就会展现在你眼前。

• 最后

前端现在无论是工具还是框架都非常之多，也非常的杂，在项目开发之前，我们应该仔细思考项目需要什么，什么会用到，什么不会用到，‘好钢用到刀刃上’，合理布局我们的项目，让开发事半功倍。

GoodLuck!!

                                                    ------------From  Madman