基于gulp编写的一个简单实用的前端开发环境.doc

基于gulp编写的一个简单实用的前端开发环境 　　自从Node.js出现以来，基于其的前端开发的工具框架也越来越多了，从Grunt到Gulp再到现在很火的WebPack，所有的这些新的东西的出现都极大的解放了我们在前端领域的开发，作为一个在前端领域里打滚了两年的文艺小码农来说，也有自己的一些体会，今天就来分享一下自己基于Gulp编写的一个比较丑陋的前端开发环境，本人技术有限，有问题和意见请私下聊，勿喷： 　　首先安装Node.js,至于怎么安装的话 ，自行度娘。安装完成之后在命令行里面输入下面两个命令，如果输出了版本号的话（这个是我自己电脑上的版本），OK那么恭喜你安装成功了 1 node -v v6.2.0 2 npm -v v3.8.9 安装好了Node环境后，接下来你应该通过npm来安装Gulp了 1 npm install gulp -g 2 -g 代表的是全局安装，这样你到时候再任何目录下都可以跑gulp命令 但是你会发现在这个过程中可能会安装失败，为什么呢？，作为一个IT人员，在伟大的天朝 ，你懂得...，但是也不要灰心，人是高级动物，总归想到办法来解决的，这得感谢我们的马爸爸了，因为他的淘宝团队提供了一个镜像/， 在这里你可以通过改变镜像源来快速的安装自己所需要的东西了，这个时候一般是通过如下的命令安装了 1 cnpm install gulp 好了，安装完Gulp后，接下来是你大展身手的时候了，在你自己的电脑上面随便哪个地方建一个目录，打开命令行，然后进入创建好的目录里面，开始撸代码,关于生成的json文件请点击这里/files/package.json，打开的速度看你的网速了,以下是为了演示 ，我建的一个目录结构，你自己可以根据项目需求自己建目 1 win+R键（windows平台上）、Mac和Linux操作系统上，自己度娘； 2 cd yourFilename （ 进入你的文件目录 ） 3 npm init ( 初始化 ) 完了你就直接一直按回车键，当看到你的目录里面生成一个以.json格式结尾的文件时，OK你的初始化就完成了接着你在根目录下新建一个名叫gulpfile.js的js文件，我也不知道为啥叫这个名字，反正就是这样规定的， 先前gulp安装是在全局环境下， 那么现在gulp的安装就是在你目录下面安装了 1 命令行运行 npm/cnpm install gulp --save-dev 2 --save-dev ( 你安装的包会出现在你开发(dev)的依赖(Dependencies)里),这样方便以后你的项目如果别人也用的话，那么那个人只要 npm/cnpm install 一下,OK所以的插件都安装了，你不需要拷贝给他 到了这一步，在编辑器中打开刚才新建的gulpfile.js文件，写入如下的代码进行测试 复制代码 1 var gulp = require(gulp); 2 gulp.task(test,function(){ 3 4 console.log(gulp 测试成功了!! 5 6 }) 7 8 在命令行运行 gulp test 回车 如果看到了控制台输出了那句话，OK,你的gulp的测试成功 复制代码 好了到了上面这一步我们的准备工作都差不多了，我们接下来就来一个一个的安装插件，以及插件的基本使用，最后完成我们这个简单但实用的开发环境。关于Gulp的完整使用请点击这里/,这里不再讲解 对于一个项目来说的话，通常离不开模板编译、打包压缩，自动化部署等操作步骤，但是在这里我们重点讲解前面两项，好了回到命令行，开始撸代码，首先一个是html文件的编译依赖我们第一个使用的插件是 ``gulp-content-includer gulp-rev-append``,在html文件中导入一些公共的模块和为页面中引入的js。css、img加上版本号 复制代码 1 命令行: npm/cnpm install gulp-content-includer --save-dev 在gulpfile.js 写如下的代码: 2 var gulp = require(gulp);// 引入 gulp 3 var contentIncluder = require(gulp-content-includer) 4 var rev = require(gulp-rev-append); 5 gulp.task(html, function() { 6 gulp.src([src/module/**/*.html,!src/module/public/html/*.html]) 7 .pipe(contentIncluder(