使用gulp构建自己的开发工具

随着前端技术的发展，作为一名前端人员，所要掌握的东西越来越多，各种框架，各种新的语法，文件格式，新技术层出不穷。在这个时候，除了对代码的熟练，一个好的开发平台也往往能提高我们的效率。而es6和less这样的东西，可以让我们在写js和css时少写很多重复的代码，但低版本的浏览器并不支持这一切，所以，我们就想到了用es6和less来写逻辑，最后再转换成es5和css的这样一种开发模式。这次就来讲讲如何把我们的es6的js和less转成es5和css，用到的就是gulp工具，如果你对gulp感到陌生，或者不熟悉，也没关系，就算你从来没听说过，这篇傻瓜式教程也能让你很轻松的就搞定它，毕竟我们只是去用，不是去认识。

特别提示，一下所有内容只针对windows系统，苹果的电脑命令有些不一样。

一、准备工作

首先，要保证你的电脑安装了nodejs和npm。如果你是新到一个公司，不知道你用的电脑上有没有安装这两个东西，打开你的命令窗口，先输入node -v，看有没有正确的版本号打印出来，如果有，说明已经安装了，如果说是不能执行的命令，就说明还没安装，npm的检测方法一样。如果没安装，需先安装这两个东西，当然，在你看到本文时，安装node的时候就会自动安装npm了。

二、开始目录结构构建

随便找一个位置，新建一个文件夹，但最好不要是在桌面上，因为我们需要这个文件夹的路径，桌面上的文件夹不好找路径。比如，我是直接在G盘下新建了一个codeswitch的文件夹。

打开命令窗口，来到这个文件夹，刚打开的窗口大多是在用户所在路径C盘目录下，全局安装gulp，输入一下命令按enter就行

npm install gulp -g

等安装完毕，我们要再切换到刚才建的文件夹所在路径

cd /codeswitch

npm init

这个时候会让你填一大堆东西，你只需要一值按enter就行，遇到要你填N或Y的，输入N再按enter键。等一切完成，看你刚才的文件夹，如果有个package.json的文件，说明初始化目录成功。

在新建的文件夹下面新建四个文件夹，如下

jssrc //用于放置我们自己写的需要转换的js文件

jsdist //用于放置gulp转换后的js文件

csssrc //用于放置我们自己写的需要转换的less(或scss)文件

cssdist //用于放置gulp转换后的css文件

接下来，开始安装我们转换这些文件文件所需依赖的东西。

npm install gulp-babel babel-preset-es2015 gulp-less gulp-sass gulp-rename gulp-concat gulp-uglify gulp-cssnano browserify vinyl-source-stream –save-dev

babel -preset-es2015
ES2015转码规则
gulp-less
less转换所需依赖
gulp-sass
scss转换所需依赖
gulp-rename
重命名文件
gulp-concat
合并文件
gulp-uglify
压缩js文件
gulp-cssnano
压缩css文件
browserify
让你使用类似于 node 的 require() 的方式来组织浏览器端的 Javascript 代码
vinyl-source-stream
将Browserify的bundle()的输出转换为Gulp可用的vinyl（一种虚拟文件格式）流

等上述东西全部安装完成之后，我们再准备需要转换的文件。

1、在jssrc目录下新建一个main.js文件，代码如下，用的是es6的语法。

let a = 111;

let b = 222;

var xxx = (c,d) => c*d;

console.log(xxx(a,b));

2、在csssrc目录下新建一个testless.less和testscss.scss文件，里面的内容如下，因为他们语法相同。

.row{

width:100px;

.col{

float:left;

}

&:after{

content:'';

display:block;

width:0;

height:0;

visibility:hidden;

zoom:1;

clear:both;

}

要转换的文件写好之后，我们再来写转换这些文件所需的代码。

在我们之前的根目录下新建一个gulpfile.js，如果已经有了这个文件，直接在里面写代码就行。写入转换逻辑如下。

const gulp = require('gulp');

const babel = require('gulp-babel');

const uglify = require('gulp-uglify');

const rename = require('gulp-rename');

const cssnano = require('gulp-cssnano');

const concat = require('gulp-concat');

const sass = require('gulp-sass');

const less = require('gulp-less');

const browserify = require('browserify');

const source = require('vinyl-source-stream');

// 编译并压缩js

gulp.task('convertJS', function() {

return gulp.src('jssrc/*.js')

.pipe(babel({

presets: ['es2015']

}))

//注意，这里没用压缩，如果你想压缩，把下面这行的注释取消即可

//.pipe(uglify())

.pipe(gulp.dest('jsdist'))

})

// 合并并压缩css

gulp.task('convertCSS', function() {

return gulp.src('csssrc/*.css')

.pipe(concat('app.css'))

.pipe(cssnano())

.pipe(rename(function(path) {

path.basename += '.min';

}))

.pipe(gulp.dest('cssdist'));

})

// browserify,支持js的import和exports语法

gulp.task("browserify", function() {

var b = browserify({

entries: "jssrc/main.js"

});

return b.bundle()

.pipe(source("main.js"))

.pipe(gulp.dest("jsdist"));

});

// 转换scss

gulp.task('scss', function() {

return gulp.src('csssrc/*.scss')

.pipe(sass().on('error', sass.logError))

.pipe(gulp.dest('cssdist'));

});

// 转换sass

gulp.task('sass', function() {

return gulp.src('csssrc/*.sass')

.pipe(sass().on('error', sass.logError))

.pipe(gulp.dest('cssdist'));

});

// 转换less

gulp.task('less', function() {

return gulp.src('csssrc/*.less')

.pipe(less())

//注意，这里用了压缩，如果你想不压缩，把下面这行注释掉即可

.pipe(cssnano())

.pipe(gulp.dest('cssdist/'))

});

// 监视文件变化，自动执行任务

gulp.task('watch', function() {

gulp.watch('jssrc/*.css', ['convertCSS']);

gulp.watch('csssrc/*.js', ['convertJS', 'browserify']);

})

// 用一个命令同时执行多个

// 这句话的意思是，当我们运行gulp start的时候，将同时执行后面数组里的四个命令

gulp.task('start', ['convertJS', 'convertCSS', 'browserify', 'watch']);

由于这只是简单的教转换教程，不是教gulp，所以关于gulp的语法我就不解释了，自己都还不怎么明白，不误人子弟。

接下来，在命令窗口运行

gulp convertJS

运行成功后，会看到我们的jsdist目录下多了一个main.js的文件，代码如下：

"use strict";

var a = 111;

var b = 222;

var xxx = function xxx(c, d) {

return c * d;

};

console.log(xxx(a, b));

表面转换成功。

接下来，分别运行

gulp less

gulp scss

同样，打开我们的cssdist文件夹，会发现里面多了一个testless.css文件（注意，我们这里使用了压缩）

1	.row{width:100px}.row .col{float:left}.row:after{content:"";display:block;width:0;height:0;visibility:hidden;zoom:1;clear:both}

和一个testscss.css文件（没用压缩），

.row {

width: 100px; }

.row .col {

float: left; }

.row:after {

content: '';

display: block;

width: 0;

height: 0;

visibility: hidden;

zoom: 1;

clear: both; }

虽然testscss.css的格式丑了点，但转换还是正确的。

至此结束，对于以后我们写好的代码，如果想转换，只需把我们的文件放到对应的目录，执行一下相应的命令就OK啦，至于你是否要压缩的，看一下我代码里的注释，改一下就可以了。

贵兴博客

使用gulp构建自己的开发工具

特别提示，一下所有内容只针对windows系统，苹果的电脑命令有些不一样。

相关文章

发表评论

发表评论