gulp，前端自动化构建

前端开发已经不再是静态网页开发，日新月异的前端技术已经让前端代码逻辑和交互越来越复杂，不易管理，模块化和预处理框架把项目分成若干小模块，前端优化等处理让前端构建更加困难，前端自动化构建工具的诞生让前端开发更为便捷。

---

前端自动化可以做到很多的事，比如：

• css,js 代码压缩合并，风格检查 —— gulp-uglyfy ， concat , gulp-rename , gulp-minify-css
• sass 转 css —— gulp-sass
• es6 babel —— gulp-babel ， babelify
• AMD 模块化 —— browserify
• 5.image 压缩 —— gulp-imagemin
• 6.HTML去掉注析、换行符
• 7.多项目处理
• and so on

gulp可以帮你做到这些事

---

一、让我们开始——gulp

1. node 安装 模块

首先你要有一点nodejs基础，了解terminal ，npm 或者 yarn

2.开始安装gulp

npm 安装

npm install gulp -g

yarn 安装

yarn add gulp -global

3.新建项目

测试版文件夹样式

4.项目根目录新建gulpfile.js文件

5.npm init 或者 yarn init

6.安装需要模块

二、开始gulp之旅

1.简单的模块使用 —— 模块引入

可能会用到的模块

const gulp = require('gulp'),  //gulp模块
      sass = require('gulp-sass'), //sass模块
      minifycss = require('gulp-minify-css'), //css压缩
      uglify = require('gulp-uglify'), //js压缩
      imagemin = require('gulp-imagemin'), //图片压缩
      rename = require('gulp-rename'), //文件重命名
      concat = require('gulp-concat'), //文件合并
      livereload = require('gulp-livereload'), // 自动刷新
      source = require('vinyl-source-stream'), //sourceMap
      babel = require('gulp-babel'), //babel
      babelify = require( 'babelify' ); //babel

2.使用sass转css.min

//定义一个可实现的任务（task)
gulp.task('styles', function() {   
    //gulp.src 任务开始 dist/scss/文件夹index.scss文件 表示要传换这个东东
    return gulp.src('dist/scss/index.scss')  
    //把scss文件为css
    .pipe(sass())
    //gulp.dest 文件存放，转好的css文件放到dist/style文件夹下
    .pipe(gulp.dest('dist/style'))
    //css 文件压缩
    .pipe(minifycss())
    //rename 文件名加入min
    .pipe(rename({ suffix: '.min' }))
    //把转好的文件放置assets/style文件夹中
    .pipe(gulp.dest('assets/style'))
});

3.使用js转js.min

最简单的js es6 babel传换配置

gulp.task('scripts', function() {
  //gulp.src dist/js文件夹下所有js文件  *号匹配 
  return gulp.src('dist/js/*.js')
    //babel传换
    .pipe(babel())
    //文件放置assets/js文件夹中
    .pipe(gulp.dest('assets/js'))
});

稍微完整配置

关于gulp.src我们可能在使用中只有一个文件或着多个文件需要配置,那么我们可以用src来写，

gulp.src('dist/js/*.js') //代表  dist/js文件夹下所有js后缀的文件
gulp.src(['dist/js/index.js','dist/js/app.js']) //dist/js下index.js与app.js文件
gulp.src('dist/js/**')//dist/js文件夹下所有子文件夹与文件

gulp.task('scripts', function() {
  return gulp.src('dist/js/*.js')
    .pipe(babel())
    //dist/js文件夹中所有js文件合并为bundle.js
    .pipe(concat('bundle.js'))
    //bundle文件加.min后缀
    .pipe(rename({ suffix: '.min' }))
     //sourcemap
    .pipe(sourcemaps.init({loadMaps: true}))
     //sourcemap 存放位置
    .pipe(sourcemaps.write('./'))
    //最终文件存放位置 assets/js
    .pipe(gulp.dest('assets/js'))
});

回家回家，明天再更