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

  • A+
所属分类:Web前端
摘要

gulp 是一个项目开发的自动化打包构建工具
基于 node 环境来运行的 1.cnpm install gulp -g   // 全局安装:为了执行gulp任务
2.cnpm install gulp     // 本地安装:为了项目文件调用gulp插件的功能
3.gulp -v     // 查看版本号,出现版本号即为安装成功

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

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

安装包 -D参数开发dev环境依赖
没有-D直接下载是线上环境依赖
在上传文件时会删除依赖包项目,node_modules文件体积太多,用时直接下载不用时可以删除
基于node平台项目的gulp自动化构建打包工具
1.有创建项目文件
基于node平台项目的gulp自动化构建打包工具
先命令全局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

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