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'))
});

回家回家,明天再更

你可能感兴趣的:(gulp,前端自动化构建)