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

时间 2019-11-08

标签基于 gulp 编写一个简单实用前端开发环境栏目 JavaScript 繁體版

原文原文链接

自从Node.js出现以来，基于其的前端开发的工具框架也愈来愈多了，从Grunt到Gulp再到如今很火的WebPack，全部的这些新的东西的出现都极大的解放了咱们在前端领域的开发，做为一个在前端领域里打滚了两年的文艺小码农来讲，也有本身的一些体会，今天就来分享一下本身基于Gulp编写的一个比较丑陋的前端开发环境，本人技术有限，有问题和意见请私下聊，勿喷：css

　　首先安装Node.js,至于怎么安装的话，自行度娘。安装完成以后在命令行里面输入下面两个命令，若是输出了版本号的话（这个是我本身电脑上的版本），OK那么恭喜你安装成功了html

1 node -v   v6.2.0
2 npm  -v   v3.8.9

安装好了Node环境后，接下来你应该经过npm来安装Gulp了前端

1 npm install gulp -g
2 -g 表明的是全局安装，这样你到时候再任何目录下均可以跑gulp命令

可是你会发如今这个过程当中可能会安装失败，为何呢？，做为一个IT人员，在伟大的天朝，你懂得...，可是也不要灰心，人是高级动物，总归想到办法来解决的，这得感谢咱们的马爸爸了，由于他的淘宝团队提供了一个镜像http://npm.taobao.org/，node

在这里你能够经过改变镜像源来快速的安装本身所须要的东西了，这个时候通常是经过以下的命令安装了git

1 cnpm install gulp

好了，安装完Gulp后，接下来是你大展身手的时候了，在你本身的电脑上面随便哪一个地方建一个目录，打开命令行，而后进入建立好的目录里面，开始撸代码,关于生成的json文件请点击这里https://docs.npmjs.com/files/package.json，打开的速度看你的网速了,如下是为了演示，我建的一个目录结构，你本身能够根据项目需求本身建目es6

1 win+R键（windows平台上）、Mac和Linux操做系统上，本身度娘；
2 cd yourFilename （ 进入你的文件目录 ）
3 npm init ( 初始化 )

完了你就直接一直按回车键，当看到你的目录里面生成一个以.json格式结尾的文件时，OK你的初始化就完成了接着你在根目录下新建一个名叫gulpfile.js的js文件，我也不知道为啥叫这个名字，反正就是这样规定的，先前gulp安装是在全局环境下，github

那么如今gulp的安装就是在你目录下面安装了npm

1 命令行运行 npm/cnpm install gulp  --save-dev
2 --save-dev ( 你安装的包会出如今你开发(dev)的依赖(Dependencies)里),这样方便之后你的项目若是别人也用的话，那么那我的只要 npm/cnpm install 一下,OK因此的插件都安装了，你不须要拷贝给他

到了这一步，在编辑器中打开刚才新建的gulpfile.js文件，写入以下的代码进行测试json

1 var gulp = require('gulp');
2 gulp.task('test',function(){
3 
4      console.log('gulp 测试成功了!!'
5 
6  })
7 
8 在命令行运行 gulp test 回车 若是看到了控制台输出了那句话，OK,你的gulp的测试成功

好了到了上面这一步咱们的准备工做都差很少了，咱们接下来就来一个一个的安装插件，以及插件的基本使用，最后完成咱们这个简单但实用的开发环境。关于Gulp的完整使用请点击这里http://www.gulpjs.com.cn/,这里再也不讲解
对于一个项目来讲的话，一般离不开模板编译、打包压缩，自动化部署等操做步骤，可是在这里咱们重点讲解前面两项，好了回到命令行，开始撸代码，首先一个是html文件的编译依赖咱们第一个使用的插件是 ``gulp-content-includer gulp-rev-append``,在html文件中导入一些公共的模块和为页面中引入的js。css、img加上版本号gulp

 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:/<!\-\-include\s+"([^"]+)"\-\->/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吧http://www.w3cplus.com/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            precss
14         ];
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: true
20             }))
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: true
12     }))
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(gulp.dest('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: true
11             }))
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：http://www.browsersync.cn/

文件的译压缩监听服务咱们依赖于``browser-sync(实时刷新)``这个插件经过这个插件咱们能够在本地开启一个小的服务环境，每当文件改变的时候，就会自动处理，具体的使用请点击上面的连接，时间的缘由就不在一一描述了

 1 命令行: npm/cnpm install browser-sync  --save-dev
 2 
 3     在gulpfile.js 写以下的代码:
 4 
 5     gulp.task('serve', ['css',"html","copyJs","js","images"], function() {
 6             browserSync.init({
 7                 server: "./dest"
 8             });
 9             gulp.watch("src/module/**/css/*.scss", ['css']);
10             gulp.watch("src/module/**/*.html", ['copyHtml']);
11             gulp.watch("src/module/public/**/*", ['copyJs']);
12             gulp.watch("src/module/**/js/*.js", ['js']);
13             gulp.watch("src/module/**/images/*.*", ['images']);
14             gulp.watch("*.html").on('change', browserSync.reload);
15     });

到这里为止咱们就差很少了，最后还有一个收尾工做，那就是用一个命令运行全部的任务，代码以下：

gulp.task('default', ['serve'])

前端工程话要作的事情有不少，不仅是上面一点点，我做为一个刚入门的前端工程师花点时间来写这个东西，只是为了和你们共勉，后期我会继续完善代码，最后附上源代码https://github.com/huangzexia/gulp，更多问题请给我发邮件（huangzexiameishu@163.com），在github上下载下来后按照下面的命令

代码运行：

一、运行npm install

二、运行gulp

三、在浏览器中输入http://localhost:3000/login/index.html```