前端开发已经不再是静态网页开发，日新月异的前端技术已经让前端代码逻辑和交互越来越复杂，不易管理，模块化和预处理框架把项目分成若干小模块，前端优化等处理让前端构建更加困难，前端自动化构建工具的诞生让前端开发更为便捷。
前端自动化可以做到很多的事，比如：
- 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'))
});
