gulp打包压缩

版权声明:本文遵循“署名-非商业用途-保持一致”创作公用协议 https://blog.csdn.net/qq563969790/article/details/77991773

nodejs环境配置和npm全局就不说了,假设这两者你都配置好了。想使用gulp打包压缩js文件,请按下面的步骤来:
1、npm全局安装gulp >npm install -g -gulp
2、在项目目录下创建package.json文件 >npm init

{
  "name": "my-gulp",
  "version": "1.0.0",
  "description": "demo",
  "devDependencies": {
    "gulp": "^3.9.1",      //install时,--save-dev写入,下同
    "gulp-concat": "^2.6.1",
    "gulp-rename": "^1.2.2",
    "gulp-uglify": "^3.0.0"
  },
  "scripts": {},
  "author": "chua",
  "license": "ISC"
}

3、安装依赖

npm install gulp –save-dev
npm install gulp-concat –save-dev
npm install gulp-rename –save-dev
npm install gulp-uglify –save-dev

4、创建gulpfile.js文件

var gulp = require('gulp'),
    concat = require('gulp-concat'),
    rename = require('gulp-rename'),
    uglify = require('gulp-uglify');

gulp.task('hello',function(){
    console.log('cnm');  //请忽略
});

gulp.task('minjs', function () {
    gulp.src(['./js/test1.js','./js/test.js']) //数组顺序表示合并的顺序
        .pipe(concat('hehe3.js'))   //先合并成新文件
        .pipe(gulp.dest('./dest'))  //合并后存放路径
        .pipe(uglify())             //压缩-未加密
        .pipe(rename('hehe3.min.js'))  //压缩文件重命名
        .pipe(gulp.dest('./dest'));    //存放路径
});
目录:
-root
|-js
   |-test.js
   |-test1.js
|-dest
   |-none
|-node_modules

5、此时dest目录为空,在项目目录下打开命令行输入:gulp minjs就将test和test1合并压缩了

很简单吧。

展开阅读全文

没有更多推荐了,返回首页