使用gulp搭建前端构建工具

Why？

今天跟你们分享的是关于目前本身的公司的项目优化中所使用到的gulp构建工具。目前公司对产品的优化决定采用VueJs来进行单页面开发，无疑这种新的技术框架对一个项目的效率会提高得更快更强。现在前端的发展速度飞快，仿佛稍微中止学习的脚步就会被时代抛弃，但咱们也切忌过于急躁，所谓万卷不离其宗，打好基础是关键。

What？

在进行基础巩固的基础上，使用gulp构建工具能够在开发的过程当中进行部分自动化构建，如对页面的监听，对样式的编译，对代码的压缩与打包。
做为一个小型的项目来讲，这些基本就足够了。
搭建gulp最主要的是使用gulp的工做流，经过在gulp中的gulpfile文件编写咱们的工做流，就仿佛一个个车间，在咱们一条条命令下，就能完成咱们须要的工做。

How？

1.安装NodeJs

首先，最基本也最重要的是，咱们须要搭建node环境。访问http://nodejs.org，下载完成后直接运行程序，就一切准备就绪。npm会随着安装包一块儿安装。
为了确保Node已经正确安装，咱们执行几个命令。

node -v

若是正确安装的话，你会看到所安装的Node的版本号，接下来看看npm。

npm -v

这一样能获得npm的版本号。
若是这两行命令没有获得返回，可能node就没有安装正确，尝试重启下命令行工具，若是还不行的话，只能回到第一步进行重装。
安装成功后咱们就能够在目标目录中初始化环境

npm init

使用上述代码在项目空间中初始化环境，按步骤填写后会生成package.json文件

2.安装gulp

使用npm工具下载gulp。在命令行中输入

sudo npm install -g gulp

使用下面的命令查看gulp的版本号以确保gulp已经被正确安装。

gulp -v

接下来，咱们须要将gulp安装到项目本地

npm install —-save-dev gulp

这里，咱们使用—-save-dev来更新package.json文件，更新devDependencies值，以代表项目须要依赖gulp。
Dependencies能够向其余参与项目的人指明项目在开发环境和生产环境中的node模块依懒关系，想要更加深刻的了解它能够看看package.json文档。

3.gulpfile文档编写

在这里使用我在项目中使用的gulpfile文件。

// 引入 gulp
var gulp = require('gulp');

// 引入组件
var jshint = require('gulp-jshint'); //语法检查
var sass = require('gulp-sass'); //sass编译
var concat = require('gulp-concat'); //合并
var uglify = require('gulp-uglify'); //js压缩
var rename = require('gulp-rename'); //重命名
var htmlmin = require('gulp-htmlmin'); //页面压缩
var minifyCss = require('gulp-minify-css'); //css压缩
var rev = require('gulp-rev'); //对文件名加MD5后缀
var revCollector = require('gulp-rev-collector'); //路径替换
var cheerio = require('gulp-cheerio'); //替换引用


// 默认任务 
gulp.task('default', ['sass', 'lint']);
// 开发环境gulp任务
gulp.task('watch', function() {
    // gulp.watch('./src/index.html', ['sass', 'lint']);
    gulp.watch('./src/scss/*.scss', ['sass']);
    gulp.watch('./src/js/*.js', ['lint']);
});
// 检查脚本 
gulp.task('lint', function() {
    gulp.src('./src/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});
// 编译Sass 
gulp.task('sass', function() {
    gulp.src('./src/scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./src/css'));
});



// // 生产环境gulp任务
gulp.task('dev', ['cssConcat', 'scripts']);
// js合并，压缩文件 
gulp.task('scripts', function() {
    gulp.src('./src/js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./dist/js'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(rev())
        .pipe(gulp.dest('./dist/js'))
        .pipe(rev.manifest({merge: true}))
        .pipe(gulp.dest('./rev/js/'));
});
// css合并压缩
gulp.task('cssConcat', function() {
    gulp.src('./src/css/**.css')
        .pipe(concat('style.min.css'))
        .pipe(minifyCss())
        .pipe(rev())
        .pipe(gulp.dest('./dist/css'))
        .pipe(rev.manifest({merge: true}))
        .pipe(gulp.dest('./rev/css/'));
});
//改变引用文件
gulp.task('rev', function() {
    gulp.src(['./rev/css/rev-manifest.json', './rev/js/rev-manifest.json', './dist/index.html'])
        .pipe(revCollector()) 
        .pipe(gulp.dest('./dist/'));
});
gulp.task('indexHtml', function() {
    return gulp.src('index.html')
        .pipe(cheerio(function ($) {
            $('script').remove();
            $('link').remove();
            $('body').append('<script src="./js/all.min.js"></script>');
            $('head').append('<link rel="stylesheet" href="./css/style.min.css">');
        }))
        .pipe(gulp.dest('dist/'));
});
//压缩html文件
gulp.task('minify', function() {
    return gulp.src('dist/*.html')
        .pipe(htmlmin({
            collapseWhitespace: true
        }))
        .pipe(gulp.dest('./dist/'));
});

基本上在这样的工做流程中，代码的压缩合并，监听发布均可以使用gulp流来控制。
在使用gulpfile以前，要先对所须要的依赖进行安装。使用npm对依赖进行下载，这里下载的就是文件中所require引用的依赖，这里就不将所有写下来了。

npm i gulp-jshint --save-dev

gulp的工做流程十分简单，主要用task，run，watch，dest来进行任务搭建。

• task主要做为任务的新建，即像我文件中所写的

• run起运行任务的命令

• watch起监听命令，做为对工程中文件的变化起监听做用，这一点若是再搭配页面重加载效果，即gulp-connect依赖，则能够实现页面无需手动刷新操做

• dest主要是对文件的路径进行更改

更多详细的能够参考gulp的官网。熟悉了就赶忙尝试起来吧，趁年轻，大胆试错。

Next？

下一次的分享可能会收集在论坛上所了解到的一些我常常在项目中看见的代码，同时也是做为本身一个技术积累，与你们一块儿学习。CU tomorrow

Finished

个人技术博客主要以github上建立的一个仓库为主，由于前端论坛太多了，我无从下手，因此通常都会先在github上整理完后再分发到各个社区，有兴趣请戳
☛ MolyCHNs Blogger