gulp略完整的前端代码打包

 

安装gulp-cli
npm install gulp-cli -g

安装gulp:
npm install gulp

需要:
另存命名为：gulpfile.js
package.json（团队开发）npm init下载 一路回车,最终选择yes;

安装gulp-uglify插件
npm install gulp-uglify --save-dev

 

安装完成后

验证:
gulp --version

看看是否安装成功。

步骤：

 1 //引入依赖
 2 var gulp = require('gulp');
 3 //引入JS压缩插件
 4 var uglify = require('gulp-uglify');
 5 //配置任务
 6 gulp.task('uglifyJS',function(){
 7     gulp.src('src/***.js')
 8     .pipe(uglify())
 9     .pipe(gulp.dest('dest'))
10     
11 })
12 //默认注册任务
13 gulp.task('default',['uglifyJS']);

 

压缩css js img方法：

 1 var gulp=require('gulp');
 2 var uglify=require('gulp-uglify');//压缩文件
 3 var rename=require('gulp-rename');//重命名文件
 4 var mincss=require('gulp-mini-css');//css压缩文件
 5 var imagemin = require('gulp-imagemin'); //图片压缩文件
 6 gulp.task('uglify:js',function(){
 7     gulp.src('src/sum.js')
 8     .pipe(uglify())
 9     .pipe(rename('sum.min.js'))
10     .pipe(gulp.dest('dest'));
11 });
12 gulp.task('css',function(){
13     gulp.src('src/index1.css')
14     .pipe(mincss())
15     .pipe(rename('index1.min.css'))
16     .pipe(gulp.dest('dest'));
17 gulp.task('imagemin', function(){
18     gulp.src('src/***.png')
19     .pipe(imagemin())
20     .pipe(rename('***.min.png'))
21     .pipe(gulp.dest('dest'));
22 })

还是那句话多看官方文档。

>>> github 地址，请选择   imagemin   分支<<<

转载于:https://www.cnblogs.com/chw8/p/7078171.html