【web前端自动化工作环境配置】4.gulp工作流

在创建工程目录之前先全局安装一下gulp ：$sudo npm install gulp -g

1.进入创建的工程目录，命令行创建npm的配置文件

（a）npm init

完成以后项目根目录下会出现一个package.json文件，如下所示：

{
  "name": "gamelanding",
  "version": "1.0.0",
  "description": "游戏落地宣传页",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
}

2.添加一个gulp的依赖包，类似的需要什么包都可以安装

（a）npm install gulp --save-dev

安装完成后，项目的根目录下会有一个node-modules的文件夹，package.json中会有gulp的依赖，如下所示：

{
  "name": "gamelanding",
  "version": "1.0.0",
  "description": "游戏落地宣传页",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.1",
    "browser-sync": "^2.26.7",
    "gulp": "^4.0.2",
    "gulp-babel": "^7.0.1",
    "gulp-connect": "^5.7.0",
    "gulp-htmlmin": "^5.0.1",
    "gulp-imagemin": "^7.1.0",
    "gulp-notify": "^3.2.0",
    "gulp-sass": "^4.0.2",
    "gulp-uglify": "^3.0.2"
  },
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0"
  }
}

3.在项目的根目录下添加一个gulpfile.js文件，这个是gulp的主文件，这个文件名是固定的不能修改成别的，运行的时候会自动加载，在gulpfile.js中抽象我们需要做的任务 。

const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync');
const reload = browserSync.reload;
const htmlmin = require('gulp-htmlmin');
const uglify = require('gulp-uglify');
const babel = require("gulp-babel"),
    es2015 = require("babel-preset-es2015")
const imageMin = require('gulp-imagemin');
notify = require('gulp-notify');//提示信息

// gulp把sass编译成css
gulp.task('sass', function () {
  return gulp.src('sass/**/*.scss').pipe(sass()).pipe(gulp.dest('gameLanding/css'));
  // console.log('HelloWorld');
});
// 编译 压缩 js
gulp.task('js', function () {
    return gulp.src(['js/**/*.js','js/*.js'])
        .pipe(babel({presets:[es2015]}))
        .pipe(uglify({ mangle: false }))
        .pipe(gulp.dest('gameLanding/js'))
        .pipe(notify({message: 'js task ok'}));
});
// 压缩html
gulp.task('html', function () {
    var options = {
        collapseWhitespace: true, //压缩HTML
        collapseBooleanAttributes: true, //省略布尔属性的值
        removeComments: true, //清除html注释
        removeEmptyAttributes: true, //删除所有空格做属性的值
        removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
        minifyJS: true,   //压缩页面JS
        minifyCSS: true    //压缩页面CSS
    };
    return gulp.src('landing/**/*.html')
        .pipe(htmlmin(options))
        .pipe(gulp.dest('gameLanding'))
        .pipe(reload({stream:true}));
});
// 压缩图片
gulp.task('image',function(){
    gulp.src(['images/*.*', 'images/**/*.*'])
        .pipe(imageMin({progressive: true}))
        .pipe(gulp.dest('gameLanding/images'))
});

4.运行gulp编译文件

运行项目就可以了。