Gulp总结

Gulp

基于node平台开发的前端构建工具，将机械化操作编写成任务，想要执行机械化操作只需要输入命令即可

Gulp的作用

• 项目上线 HTML CSS JS文件压缩合并
• 语法转换（es6 less等等）
• 公共文件抽离
• 修改文件浏览器自动刷新

Gulp的使用

命令行工具

sudo cnpm install gulp -g
sudo ln -s /usr/local/node/bin/gulp  /usr/local/bin/gulp

• 使用npm install gulp下载gulp库文件
• 在项目根目录下建立gulpfile.js文件
• 重构项目的文件夹结构 src目录放置源代码文件 dist目录放置构建后文件
• 在gulpfile.js文件中编写任务.
• 在命令行工具中执行gulp任务
  
  

Gulp中提供的方法

• gulp.src()：获取任务要处理的文件
• gulp.dest()：输出文件
• gulp.task()：建立gulp任务
• gulp.watch()：监控文件的变化

//引进gulp模块
const gulp = require('gulp');
//建立gulp任务
gulp.task('test', () => {
    // 获取gulp要处理任务路径
    gulp.src('./src/css/base.css')
        .pipe(gulp.dest('./dist/css'))
})

Gulp插件

gulp属于轻内核的第三方模块

抽取公共文件

  @@include('./common/header.html')

const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');
const less = require('gulp-less');
const csso = require('gulp-csso');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify')


// 建立gulp任务
gulp.task('test', () => {
    // 获取要处理的任务路径
    gulp.src('./src/css/base.css')

    // 将文件输出
    .pipe(gulp.dest('./dist/css'))
})

// 建立html任务
// 1.抽取公共文件 2.将html文件进行压缩合并

gulp.task('htmlmin', done => {
    // 获取要处理的任务路径
    gulp.src('./src/*.html')
        // 抽取文件公共文件
        .pipe(fileinclude())
        // 将html文件进行压缩并输出
        .pipe(htmlmin({ collapseWhitespace: true }))
        .pipe(gulp.dest('dist'));
    done()
})

// 建立css任务
// 1.less语法转换  2.将css文件进行压缩
gulp.task('cssmin', () => {
    // 获取要处理的任务路径
    gulp.src(['./src/css/*.less', './src/css/*.css'])
        // less语法转换
        .pipe(less())
        // 将css文件进行压缩
        .pipe(csso())

    // 将文件进行输出
    .pipe(gulp.dest('./dist/css'))
})

// 建立js任务
// 1.es6语法转换  2.将js文件进行压缩
gulp.task('jsmin', () => {
    // 获取要处理的任务路径
    gulp.src('./src/js/*.js')
        //es6语法转换
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(uglify())

    // 将文件输出

    .pipe(gulp.dest('./dist/js'))
})

// 复制文件夹
gulp.task('copy', () => {
    gulp.src('./src/images/*')
        .pipe(gulp.dest('./dist/images'))

    gulp.src('./src/lib/*')
        .pipe(gulp.dest('./dist/lib'))

})

// 构建任务
gulp.task('default', ['htmlmin', 'cssmin', 'jsmin', 'copy']);

node-modules文件夹的问题

• 文件夹及文件过多过碎 当我们将整体项目拷贝给别人的时候 传输速度会很慢很慢
• 复杂模块依赖关系需要被记录 确保模块的版本与当前的版本保持一致 否则会导致当前项目运行报错

package.json

作用：项目描述文件 记录当前项目信息 例如项目名称 版本 作者 github地址 第三方模块等

使用npm init -y命令生成

{
  "name": "gulp-detail",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "mine": "^0.1.0"
  }
}

项目依赖

• 在项目的开发阶段和线上运营阶段，都需要依赖的第三方包，称为项目依赖
• 使用npm install 包名命令下载的文件会默认被添加到 package.json 文件的 dependencies
  

开发依赖

• 在项目的开发阶段需要依赖，线上运营阶段不需要依赖的第三方包，称为开发依赖
• 使用npm install 包名 --save-dev命令将包添加到package.json文件的devDependencies字段中
  

线上依赖：npm install --production

项目别名

{
    "name": "gulp-detail",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        
        "build": "nodemon app.js"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "mine": "^0.1.0"
    }
}

console.log('Gulp end');

package-lock.json

• 锁定包的版本，确保再次下载时不会因为包版本不同而产生问题
• 加快下载速度，因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址