使用Gulp构建前端自动化方案

前言

　　在刚入门前端的时候，咱们并不清楚前端有工具能够帮咱们自动化打包压缩文件，当时只关注能实现功能就能够了，也不太在乎前端性能优化的问题，随着项目功能的复杂，项目也变得愈来愈大，页面的执行速度也开始变慢，所以咱们认识到了前端优化的重要性，可是以前的压缩打包都是须要咱们本身手动执行或者去直接转化的网站进行转化，这无疑增长了咱们的工做量，做为程序员，我以为更重要的是让程序去执行咱们想执行的东西，因而我便google了起来，查到了grunt和gulp，二者都是自动化打包，可是grunt的一大堆繁杂的配置参数让我头疼不已，直到我打开了gulp的官网，仿佛打开了新世界的大门，没有一大堆繁杂的配置参数，其API也是很是简单，学习起来很容易，并且gulp使用的是nodejs中的stream流来读取和操做数据的，使其速度更快。因而就有了下面的实践了。　

在这里已经默认你已经了解过gulp的入门了并已经安装了node.js，若是不了解的话请自行百度。

 

建立工程目录

　　首先，先创建一个工程目录，正所谓好的目录就是工程的骨架，能让别人一眼就清楚哪一个模块是干什么的，也便于代码的维护管理，下面是个人目录结构：

testGulp/
├── app/
│   ├── static/
│   │   ├── images/
│   │   │   └─ index.jpg
│   │   ├── less/
│   │   │   └─ index.less
│   │   └── scripts/
│   │       └─ index.js
│   └── views/
│       └─ index.html
│
├── dist/
└── release/

 

 

初始化npm

　　咱们在新建目录结构的时候，里面是没有package.json文件的，须要咱们npm init一下，而后不断的回车，就会生成一个package.json文件了，熟悉了解node的同窗确定了解package.json文件的做用，里面包含了咱们项目所须要的各类模块的依赖和基本信息。下面是个人package.json:

{
  "name": "testGulp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Kevin",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^4.0.0",
    "gulp-clean": "^0.3.2",
    "gulp-concat-dir": "^1.0.0",
    "gulp-imagemin": "^4.0.0",
    "gulp-less": "^3.3.2",
    "gulp-minify-css": "^1.2.4",
    "gulp-minify-html": "^1.0.6",
    "gulp-plumber": "^1.1.0",
    "gulp-run-sequence": "^0.3.2",
    "gulp-uglify": "^3.0.0",
    "gulp-zip": "^4.0.0"
  }
}

 

安装gulp任务所须要的模块

　　打开终端经过输入 npm install package(安装的包名，如:gulp) —save-dev而后回车，会发现终端有一个进度条正在安装加载，安装成功打开package.json能够发现devDependencies中会出现咱们刚才安装的包名以及对应的版本号。

　　这里也许有同窗会问在其余地方有时候会看到别人用的是—save,有时时—save-dev,究竟二者的区别是什么：

　　　使用—save-dev（也能够缩写成-D）输出的会出如今devDependencies，表明着是开发调试时的依赖，等到项目真正发布的时候不会真正出如今项目中。

　　　使用—save（也能够缩写成-S）输出的会出如今dependencies，表明着是发布后的依赖，等到项目真正发布的时候会真正出如今项目中，缺乏它们项目会运行不了。

 

构建Gulp任务

　　Gulp用来协调指挥其余模块的工做。首先在myproject文件夹下新建gulpfile.js文件，gulp会运行这个文件中的js，个人文件最终内容以下：

//使用严格模式。保证js的严谨，养成一个好习惯。
'use strict';


//使用require引入全部须要的模块，Gulp.js是基于Node.js构建的
//由于Node.js遵循CommondJS规范
//CommondJS其中有一个Modules规范，使其能够以同步的模式加载模块
var gulp = require('gulp'),
  //压缩js
  uglify = require('gulp-uglify'),
  //编译Less
  less = require('gulp-less'),
  //压缩css
  minifyCss = require('gulp-minify-css'),
  //自动前缀补全
  autoprefixer = require('gulp-autoprefixer'),
  //压缩HTML
  minifyHtml = require('gulp-minify-html'),
  //压缩图片
  imagemin = require('gulp-imagemin'),
  //管合并，能够合并同一目录下的全部文件，好处是能够减小网络请求
  concat = require('gulp-concat-dir'),
  //错误处理提示插件
  plumber = require('gulp-plumber'),
  //压缩文件
  zip = require('gulp-zip'),
  //控制task中的串行和并行。（gulp默认是并行）
  //串行是指多个任务时，各个任务按顺序执行，完成一个以后才能进行下一个。
  //并行指的是多个任务能够同时执行。
  runSequence = require('gulp-run-sequence'),
  //用来删除文件
  clean = require('gulp-clean');

//建立一个名为js的任务
gulp.task('js', function(){
  // 首先取得app/static/scripts下的全部为.js的文件（**/的意思是包含全部子文件夹)
  return gulp.src('app/static/scripts/**/*.js')
    //错误管理模块（有错误时会自动输出提示到终端上）
    .pipe(plumber())
    //合并同一目录下的全部文件,并将合并的目录名做为合并后的文件名
    .pipe(concat({ext: '.js'}))
    //js压缩
    .pipe(uglify())
    //将合并压缩后的文件输出到dist/static/scripts下（假如没有dist目录则自动生成dist目录）
    .pipe(gulp.dest('dist/static/scripts'))
});


//建立一个名为less的任务
gulp.task('less', function(){
  // 首先取得app/static/less下的全部为.less的文件（**/的意思是包含全部子文件夹)
  return gulp.src('app/static/less/**/*.less')
    //错误管理模块（有错误时会自动输出提示到终端上）
    .pipe(plumber())
    //编译less文件使其转换为css文件
    .pipe(less())
    //前缀自动补全插件
    .pipe(autoprefixer())
    //合并同一目录下的全部文件,并将合并的目录名做为合并后的文件名
    .pipe(concat({ext: '.css'}))
    //css压缩
    .pipe(minifyCss())
    //将合并压缩后的文件输出到dist/static/css下（假如没有dist目录则自动生成dist目录）
    .pipe(gulp.dest('dist/static/css'))
});

//建立一个名为html的任务
gulp.task('html', function(){
  // 首先取得app/views下的全部为.html的文件（**/的意思是包含全部子文件夹)
  return gulp.src('app/views/**/*.html')
    //错误管理模块（有错误时会自动输出提示到终端上）
    .pipe(plumber())
    //html压缩
    .pipe(minifyHtml())
    //将压缩后的文件输出到dist/views下（假如没有dist目录则自动生成dist目录）
    .pipe(gulp.dest('dist/views'))
});


//建立一个名为images的任务
gulp.task('images', function(){
  // 首先取得app/static/images下的全部为.{png,jpg,jpeg,ico,gif,svg}后缀的图片文件（**/的意思是包含全部子文件夹)
  return gulp.src('app/static/images/**/*.{png,jpg,jpeg,ico,gif,svg}')
    //错误管理模块（有错误时会自动输出提示到终端上）
    .pipe(plumber())
    .pipe(imagemin({
      optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
      progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
      interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
      multipass: true //类型：Boolean 默认：false 屡次优化svg直到彻底优化
    }))
    //将压缩后的图片输出到dist/static/images下（假如没有dist目录则自动生成dist目录）
    .pipe(gulp.dest('dist/static/images'))
});

//建立一个名为clean的任务
gulp.task('clean', function(){
  // 首先取得dist/*下的全部文件
  return gulp.src('dist/*', {read: false})
    //删除dist/*下的全部文件
    .pipe(clean())
})


//建立一个名为public的任务
gulp.task('public', function(){
  // 首先取得dist/*下的全部文件
  return gulp.src('dist/*')
    //错误管理模块（有错误时会自动输出提示到终端上）
    .pipe(plumber())
    //将dist/*下的全部文件进行压缩打包生成为public.zip文件
    .pipe(zip('public.zip'))
    //将生成的public.zip文件输出到release下（假如没有release目录则自动生成release目录）
    .pipe(gulp.dest('release'))
})

//建立一个名为watch的任务
gulp.task('watch', function(){
  //监听各个目录的文件，若是有变更则执行相应的任务操做文件
  gulp.watch('app/static/scripts/**/*.js',['js']);
  gulp.watch('app/static/less/**/*.less',['less']);
  gulp.watch('app/views/**/*.html',['html']);
})

//建立一个名为redist的任务
gulp.task('redist', function(){
  //先运行clean，而后并行运行html,js,less,images,watch
  //若是不使用gulp-run-sequence插件的话，因为gulp是并行执行的
  //有可能会出现一种状况（其余文件处理速度快的已经处理完了，而后clean最后才执行，会把前面处理完的文件删掉，因此要用到runSequence）
  runSequence('clean', ['html', 'less', 'js', 'images', 'watch'])
})

//建立一个名为default的任务（上面的任务均可以没有，可是这个任务必须有，否则在终端执行gulp命令会报错）
//在终端上输入gulp命令，会默认执行default任务，并执行redist任务
gulp.task('default', ['redist']);

 

最后

　　打开终端进入所在目录，输入gulp就能够哗哗哗看到咱们压缩打包好的文件了，但愿能帮助到一些在配置gulp遇到困扰的小伙伴。