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

基于gulp编写的一个简单实用的前端开发环境自从Node.js出现以来，基于其的前端开发的工具框架也越来越多了，从Grunt到Gulp再到现在很火的WebPack，所有的这些新的东西的出现都极大的解放了我们在前端领域的开发，作为一个在前端领域里打滚了两年的文艺小码农来说，也有自己的一些体会，今天就来分享一下自己基于Gulp编写的一个比较丑陋的前端开发环境，本人技术有限，有问题和意见请私下聊，勿喷：首先安装Node.js,至于怎么安装的话 ，自行度娘。安装完成之后在命令行里面输入下面两个命令，如果输出了版本号的话（这个是我自己电脑上的版本），OK那么恭喜你安装成功了1 node -v v6.2.02 npm -v v3.8.9安装好了Node环境后，接下来你应该通过npm来安装Gulp了1 npm install gulp -g2 -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-dev2 -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( 8 includerReg:/g 9 )10 .pipe(rev()11 .pipe(gulp.dest(dest/)12 .pipe(browserSync.stream();13 );复制代码注意:以下是为了演示 ，我建的一个目录结构，你自己可以根据项目需求自己建目录结构！（最后我会将源文件放到 github 上面，到时可以下载）在根目录下新建一个src目录，再在src目录下面建一个module目录，在这个module目录里面放不同的模块包括公共的模块，比如我们这里有一个登录模块。那么我们新建一个login文件夹，里面放与登录相关的页面和静态文件，可能还会用到一些公共的，那么我们再建一个公共的文件夹叫public，这里面放公共的文件夹如图所示:public目录下面我们新建了几个文件夹分别用来放公共的css、images、js、html，我们在login模块下新建一个index.html文件，分别引入头部和底部,如图所示:在命令行运行: gulp html 完了后会在目录下多出一个文件，打开刚才编译过的html文件你会看到完整的编译成功 如图所示那大家会问.pipe(rev()这个是干嘛的呢，这个是为js、css、img添加文件版本号的，如下图所示，我们会发现引入的文件后面都多了一个版本号了，这个是为了防止浏览器产生缓存，只要文件改变，hash值会自动变，至此我们的第一个插件搞定Html完了的话，应该是轮到css了吧，网上有很多都是关于怎么样用gulp去编译sass等文件，这里我要讲的是我们postcsss 点击去学习postcss吧/blog/tags/516.html，去编写我们的css，然后编译，废话不多说，上代码我们第二个，当然不止了，需要很多个配合使用 gulp-postcss（主要依赖模块） cssnex（使用CSS未来的语法） precss（编写Sass的函数） gulp-autoprefixer（处理浏览器私有前缀）gulp-sourcemaps（用于错误查找） gulp-minify-css（压缩css）复制代码 1 命令行: npm/cnpm install gulp-postcss cssnex precss gulp-autoprefixer gulp-minify-css gulp-sourcemaps -save-dev 2 3 在gulpfile.js 写如下的代码: 4 5 gulp.task(css, function () 6 7 var processors = 8 9 autoprefixer,10 11 cssnext,12 13 precss14 ;15 gulp.src(src/module/*/css/*.css,src/module/public/css/*.css)16 .pipe(postcss(processors)17 .pipe(autoprefixer(18 browsers: last 2 versions, Android = 4.0,19 cascade: true20 )21 .pipe(gulp.dest(dest/)22 .pipe(browserSync.stream();23 )24 复制代码我们在login模块下面新建一个css文件如图所示，写上代码在命令行运行: gulp css 在dest目录下打开刚才编译成功的样式文件 如图所示编译成功上面只搞定了编译，那还有压缩，错误定位怎么办。我们再把刚才的代码稍微改一下复制代码 1 gulp.task(css, function () 2 var processors = 3 autoprefixer, 4 cssnext, 5 precss 6 ; 7 gulp.src(src/module/*/css/*.css,src/module/public/css/*.css) 8 .pipe(postcss(processors) 9 .pipe(autoprefixer(10 browsers: last 2 versions, Android = 4.0,11 cascade: true12 )13 .pipe(minifycss() 14 .pipe(sourcemaps.init() 15 .pipe(sourcemaps.write() 16 .pipe(gulp.dest(dest/) 17 .pipe(browserSync.stream();18 )19 我们再次编译你会发现生成的文件变了，变成下面这个样子了，要的就是这个效果复制代码到此，css部分完成了,CSS部分完成了，该轮到JS了吧，js部分我主要依赖于这几个插件 gulp-babel（编译es6语法） gulp-uglify（压缩js）复制代码 1 命令行: npm/cnpm install gulp-babel gulp-uglify -save-dev 2 3 在gulpfile.js 写如下的代码: 4 5 gulp.task(js, function () 6 gulp.src(src/module/*/js/*.js,!src/module/public/js/*.js) 7 .pipe(babel( 8 presets: es2015 9 ) 10 .pipe(uglify( 11 mangle: true, /fasle不混淆变量名 true为混淆 12 preserveComments: some /不删除注释，还可以为 false（删除全部注释），some（保留preserve license cc_on等注释） ) 13 .pipe(st(dest/) 14 .pipe(browserSync.stream() 15 .pipe(browserSync.stream();16 );复制代码我们在login模块下面新建一个js文件如图所示，写上如图代码在命令行运行: gulp js 在dest目录下打开刚才编译成功的样式文件 如图所示出现这样的结果就成功了，是不是觉得很简单啊现在该轮到了图片了吧，图片也很简单，我们只用到了一个插件gulp-imagemin( 图片压缩 )复制代码 1 命令行: npm/cnpm install gulp-imagemin -save-dev 2 3 在gulpfile.js 写如下的代码: 4 5 gulp.task(images, function () 6 gulp.src(src/module/*/images/*.*,src/module/public/images/*.*) 7 .pipe(imagemin( 8 optimizationLevel: 3, 9 interlaced: true,10 progressive: true11 )12 .pipe(gulp.dest(dest/)13 .pipe(browserSync.stream();14 );15 16 17 在login目录下放入一张图片，然后命令行运行 gulp images 然后对比压缩前后图片的大小，就知道有没有成功了复制代码拷贝public下面不需要编译的一些库和插件:在项目中我们通常会依赖一些插件和js库，通常这些文件都是被编译压缩过后的，不需要再次编译压缩，所以我们直接拷贝过去就可以复制代码1 gulp.task(copyJs, function() 2 gulp.src(src/module/public/js/*/*,base: src/module/public/)3 .pipe(uglify(4 mangle: true, /fasle不混淆变量名 true为混淆5 preserveComments: some /不删除注释，还可以为 false（删除全部注释），some（保留preserve license cc_on等注释）6 )7 .pipe(gulp.dest(dest/public)8 .pipe(browserSync.stream();9 );复制代码不知道大家有没有注意,每一个任务后面的加上了.pipe(browserSync.stream()；这个是干嘛的呢，这就是接下来我们要讲到的，到这里是不是就完了呢？当然没有，我们写代码的时候不可能每次都去手动编译吧，那个太LOW了，我们要自动监听文件的编译压缩，对，就是这样文件的自动编译压缩监听服务browser-sync：/文件的译压缩监听服务我们依赖于browser-sync(实时刷新)这个插件通过这个插件我们可以在本地开启一个小的服务环境，每当文件改变的时候 ，就会自动处理，具体的使用请点击上面的链接，时间的原因就不在一一描述了 复制代码 1 命令行: npm/cnpm install browser-sync -save-dev 2 3 在gulpfile.js 写如下的代码: 4 5 gulp.task(serve, css,html,copyJs,js,images, fun