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   分支<<<