基于node平台项目的gulp自动化构建打包工具

当前位置:

首页 > 网站开发 > JavaScript >

基于node平台项目的gulp自动化构建打包工具

gulp 是一个项目开发的自动化打包构建工具
基于 node 环境来运行的

1.cnpm install gulp -g   // 全局安装:为了执行gulp任务
2.cnpm install gulp     // 本地安装：为了项目文件调用gulp插件的功能
3.gulp -v     // 查看版本号，出现版本号即为安装成功

安装包 -D参数开发dev环境依赖

没有-D直接下载是线上环境依赖

在上传文件时会删除依赖包项目，node_modules文件体积太多，用时直接下载不用时可以删除

1.有创建项目文件

先命令全局gulp依赖在node环境依赖

使用npm 安装全局依赖 gulp

npm install --global gulp

2.初始化依赖

npm init -y

后项目目录

src

package.json （包）

3.项目gulp配置

项目依赖上gulp 项目打包构建安装配置版本和全局一致

npm install -D glup -D指示开发dev环境和线上环境不一样

devDependencies 开发环境依赖模块：包里建立模块执行

项目目录

node-modules 依赖包目录

src 项目源码

gulpfile glup 配置文件

package-lock.json 依赖下载版本json文件

package.json 项目管理json文件

4.开始自己创建（新建） gulpfile.js 编译文件

特点：去除换行空格，压缩文件体积内存

文件复制任务

多任务文件执行任务

依据规则模块自动化打包构建

本地安装的gulp引入 gulp

css压缩处理 cssmin

js压缩处理 gulp-uglify

es6->es5 gulp-babel

html压缩处理 gulp-htmlmin

清除目录 gulp-clean

内置web服务器 gulp-webserver

const sass = require('gulp-sass')(require('sass'))

引入第三方包作用sass文件传成css文件

gulp-sass

5.处理第三方文件和图片之类等信息 -不用压缩直接打包转到新目录

创建一个lib任务

创建一个static任务

直接运行 gulp就可以直接运行整个项目

6.修改内容自动刷新

创建一个watch任务

改写default任务

修改后运行 gulp自动打包编译

7.使用第三方包文件依赖需要执行命令

npm i -D gulp-sass 开发

npm i sass 线上

然后再引入他们的依赖文件模块 gulp-sass 和sass

需要看看package.json项目管理文件里配置文件安装的依赖包和版本号是否完齐全

核心gulpfile.js项目目录执行自动化配置文件

  1 /**
  2  *  1. 创建项目目录结构
  3  *       cart-project
  4  *          -|src
  5  *            -|css
  6  *            -|js
  7  *            -|pages
  8  * 
  9  * 2. 初始化项目
 10  *      npm init -y
 11  *       cart-project
 12  *          -|src
 13  *            -|css
 14  *            -|js
 15  *            -|pages
 16  *          -|pagckage.json
 17  * 3. 本地安装gulp
 18  *      npm i gulp
 19  * 
 20  * 4. 配置文件gulpfile.js
 21  *     4.1 写任务
 22  */
 23  const gulp = require('gulp') //引入本地安装的gulp
 24  const cssmin = require('gulp-cssmin') //css压缩处理
 25  const uglify = require('gulp-uglify') //js压缩处理
 26  const babel = require('gulp-babel') //es6->es5
 27  const htmlmin = require('gulp-htmlmin') //html压缩处理
 28  const clean = require('gulp-clean') //清除目录
 29  const webserver = require('gulp-webserver') //内置web服务器
 30  
 31  // const sa = require('sass')
 32  // const gulpSass = require('gulp-sass')
 33  // const sass = gulpSass(sa)
 34  
 35  const sass = require('gulp-sass')(require('sass')) // 引入第三方包作用sass文件传成css文件
 36  
 37  
 38  /**
 39   * css打包任务
 40   *   压缩处理  第三方包 cssmin
 41   */
 42  gulp.task('css', function () {
 43      return gulp.src('./src/css/**')
 44             .pipe(cssmin())
 45             .pipe(gulp.dest('./dist/css/'))
 46  })
 47  
 48  
 49  /**
 50   * sass打包任务
 51   *   1. sass->css
 52   *   2. 压缩
 53   *   
 54   */
 55  gulp.task('sass', function () {
 56      return gulp.src('./src/sass/**') //读取文件流
 57             .pipe(sass()) // sass文件流转到css文件流
 58             .pipe(cssmin())  //css文件压缩处理
 59             .pipe(gulp.dest('./dist/css/')) //写入dist/css目录
 60  })
 61  
 62  
 63  /**
 64   *  js打包任务
 65   *    1. 压缩js代码
 66   *    2. es6最新语法转成es5语法
 67   *         ()=>{}      function(){}
 68   *         class A     function A(){}
 69   *         let const  -> var
 70   */
 71  gulp.task('js',function(){
 72      return gulp.src('./src/js/**')
 73            .pipe(babel({
 74                presets:['es2015']
 75            }))
 76            .pipe(uglify())
 77            .pipe(gulp.dest('./dist/js/'))
 78  })
 79  
 80  /**
 81   * html打包任务
 82   *   1. 压缩html代码
 83   */
 84  gulp.task('html',function(){
 85      return gulp.src('./src/pages/**')
 86             .pipe(htmlmin({
 87                 removeEmptyAttributes:true,
 88                 collapseWhitespace:true
 89             }))
 90             .pipe(gulp.dest('./dist/pages/'))
 91  })
 92  
 93  /**
 94   * lib和static打包
 95   */
 96  gulp.task('lib',function(){
 97      return gulp.src('./src/lib/**')
 98             .pipe(gulp.dest('./dist/lib/'))
 99  })
100  gulp.task('static',function(){
101      return gulp.src('./src/static/**')
102             .pipe(gulp.dest('./dist/static/'))
103  })
104  
105  
106  /**
107   * 清除dist目录任务
108   */
109  gulp.task('clean', function(){
110      return gulp.src('./dist',{allowEmpty:true})
111             .pipe(clean())
112  })
113  
114  /**
115   * 启动webserver
116   */
117  gulp.task('webserver',function(){
118      return gulp.src('./dist')
119             .pipe(webserver({
120                 host:'localhost',
121                 port:3000,
122                 livereload:true,
123                 open:'./pages/index.html'
124             }))
125  })
126  
127  /**
128   * 监听所有文件变化任务
129   */
130  gulp.task('watch',function(){
131      gulp.watch('./src/css/**',gulp.parallel('css'))
132      gulp.watch('./src/js/**',gulp.parallel('js'))
133      gulp.watch('./src/sass/**',gulp.parallel('sass'))
134      gulp.watch('./src/pages/**',gulp.parallel('html'))
135      gulp.watch('./src/static/**',gulp.parallel('static'))
136      gulp.watch('./src/lib/**',gulp.parallel('lib'))
137  })
138  
139  
140  /**
141   * 顺序执行所有任务
142   */
143  gulp.task('mytask',gulp.series('sass','css','js','html','static','lib'))
144  
145  /**
146   * 定义一个默认任务
147   * exports.default暴露一个默认任务
148      根目录下可执行运行默认任务，通过 gulp 命令
149   */
150  // exports.default = gulp.series('sass','css','js','html','static','lib')
151  // exports.default = gulp.parallel('clean','sass','css','js','html','static','lib')
152  exports.default = gulp.series(
153                      'clean',
154                       gulp.parallel('sass','css','js','html','static','lib'),
155                       'webserver', 
156                       'watch')

gulp完整依赖配置gulpfile,js

原文：https://www.cnblogs.com/cc-font/p/15619421.html

栏目列表