前端开发自动化之 Gulp

越来越意识到开发的规范化的重要性，以及自动化带来的高效，前端开发环境自动化构建的技能是必须要 get 的，于是最近用了一个 demo 完整的跑了一遍 Gulp 的前端开发自动化，体验很棒，这里记录下。
努力向规范看齐，向大牛看齐，多去了解，多去接触，视野开阔才能看到更远的风景，会有更多的可能。

工具使用

技术的进击的过程相似于打怪升级买装备，初级拿把小米步枪就可以制霸方圆，升级之后遇到高手才发现没几把 AK 都不好意思跟人打招呼，再升级之后，发现二营长的意大利炮还是要有的，哈哈。
学习前端以来都是自己一个人折腾，学的不系统，做的项目也都是小打小闹，一直没接触到自动化，第一次看介绍 Grunt 的文章时，因为应用水平太低，反复看了三遍才稍微理解开发环境自动化，但是一直没机会应用，这次做个笔记先，关于使用 grunt、gulp还是 webpack，我的观点是，你在纠结的时候，我已经开始上代码了……

文件目录结构

|-/dist
|-/src
|--`css
|--`images
|--`js
|--`less
|-gulpfile.js
|-package.json

Gulp

技术选型的时候，不求最新最炫，我考虑的首要因素是合适，之所以选择 gulp，首先是上手较 grunt 简单，而且插件已经很丰富了，而且目前我应用的场景没必要使用 webpack。
Gulp 以及所用到的插件的安装都是通过 npm 。

gulpfile.js 配置

类似于 package.json，gulpfile.js 是gulp的配置文件，在文件中引入插件，以及自定义指令。

gulp 插件

gulp 丰富的插件可以满足目前开发环境中遇到的大部分需求，我这里列了几个插件，只是目前需要的，有新需求时再补充，如果你想找插件，直接去 npm 官网

var gulp = require("gulp")
// 编译 less
var less = require("gulp-less")
// 压缩 css 代码
var minifycss = require("gulp-clean-css")
// 压缩 js 代码
var uglify = require("gulp-uglify")
// 合并文件
var concat = require("gulp-concat")
// 神器，浏览器自动刷新
var browserSync = require("browser-sync").create()
var reload = browserSync.reload;

配置开发环境 dev

// css:dev 命令 将 /src 中的 css 移动到 /dist 并刷新页面
gulp.task('css:dev', function() {
    return gulp.src('src/css/*.css')
        .pipe(gulp.dest('dist/static/css'))
        .pipe(reload({
            stream: true
        }))
})
// less:dev 命令 编译 less，移动到 /dist 并刷新页面
gulp.task('less:dev', function() {
    return gulp.src('src/less/*.less')
        .pipe(less())
        .pipe(gulp.dest('dist/static/css'))
        .pipe(reload({
            stream: true
        }))
})
// js:dev 命令 移动 js 并刷新页面
gulp.task('js:dev', function() {
    return gulp.src('src/js/*.js')
        .pipe(gulp.dest('dist/static/js'))
        .pipe(reload({
            stream: true
        }))
})
// dev 命令，执行 js:dev less:dev css:dev 并启动 browserSync 监听 /src 下的 js、less、css代码
gulp.task('dev', ['js:dev', 'less:dev', 'css:dev'], function() {
    browserSync.init({
        server: {
            baseDir: '/'
        },
        notify: false
    })
    gulp.watch('src/js/*.js', ['js:dev'])
    gulp.watch('src/less/*.less', ['less:dev'])
    gulp.watch('src/css/*.css', ['css:dev'])
})

打包配置

打包上线时，可以将多个文件压缩(模板、css、css)、合并(css、js)，减少请求

// css 压缩合并
gulp.task('css', function() {
    return gulp.src('src/css/*.css')
        .pipe(autoprefixer())
        .pipe(minifycss())
        .pipe(concat("all.min.css"))
        .pipe(gulp.dest('dist/static/css'))
})
// less 编译、压缩
gulp.task('less', function() {
    return gulp.src('src/less/*.less')
        .pipe(less())
        .pipe(minifycss())
        .pipe(gulp.dest('dist/static/css'))
})
// js 压缩 合并
gulp.task('js', function() {
    return gulp.src('src/js/*.js')
        .pipe(uglify())
        .pipe(concat("all.min.js"))
        .pipe(gulp.dest('dist/static/js'))
        .pipe(uglify())
})
// 一键打包
gulp.task('build', ['css', 'less', 'js'])

开发流程

gulp dev 开发环境，gulp 监听 /src 下的修改，更新数据，刷新浏览器，查看预览
功能开发结束，打包
gulp build 打包，编译，压缩文件
上线

参考:

入门：十分钟自动化构建

文章目录