gulp教程之壓縮合並css,js
阿新 • • 發佈:2017-12-13
配置 分享 ava png 命令行 end 文件名 所有 gulp
package.json
如果你熟悉 npm 則可以利用 package.json 保存所有 npm install --save-dev gulp-xxx 模塊依賴和模塊版本。
在命令行輸入
npm init
會依次要求補全項目信息,不清楚的可以直接回車跳過
安裝依賴
安裝 gulp 到項目(防止全局 gulp 升級後與此項目 gulpfile.js 代碼不兼容)
nup install gulp --save-dev
說明:--save-dev 保存配置信息至 package.json 的 devDependencies 節點。
此時打開 package.json 會發現多了如下代碼
"devDependencies": { "gulp": "^3.8.11" }
聲明此項目的開發依賴 gulp
接著安裝其他依賴:項目中需要用的都需要安裝,這裏我們可以統一安裝,之間用空格隔開
npm gulp-minify-css gulp-concat gulp-uglify gulp-rename gulp-util --save-dev
此時packjson會持續更新,將我們上面安裝依賴統一寫入packjson中。
配置 JS 任務
此時新建gulpfile.js文件
1.首先引入依賴
var gulp = require(‘gulp‘), minifycss = require(‘gulp-minify-css‘), concat = require(‘gulp-concat‘), uglify = require(‘gulp-uglify‘), rename = require(‘gulp-rename‘), gutil = require(‘gulp-util‘);
2.添加執行任務
//壓縮css
gulp.task(‘minify_css‘, function () { var cssSrc = [‘./src/css/*.css‘]; return gulp.src(cssSrc) //壓縮的文件 .pipe(concat(‘all.css‘)) //合並所有css到all.css .pipe(gulp.dest(‘./dist/css‘)) //輸出文件夾 .pipe(rename({suffix: ‘.min‘})) .pipe(minifycss()) .pipe(gulp.dest(‘./dist/css‘)); //執行壓縮 });
//壓縮js
gulp.task(‘minify_js‘, function() { var jsSrc = [‘./src/js/*.js‘,‘!./src/js/*.src.js‘]; return gulp.src(jsSrc) .pipe(concat(‘all.js‘)) //合並所有js到all.js .pipe(gulp.dest(‘./dist/js‘)) //輸出all.js到文件夾 .pipe(rename({suffix: ‘.min‘})) //rename壓縮後的文件名 .pipe(uglify()) //壓縮 .pipe(gulp.dest(‘./dist/js‘)); //輸出 });
3.默認任務
//默認任務
gulp.task(‘default‘, function(){ gulp.run(‘minify_css‘, ‘minify_js‘); });
執行任務
命令行下輸入:
gulp
最終形成目錄結構如下
src是我們原始文件,dist裏就是我們已經壓縮成功之後生成的文件了
gulp教程之壓縮合並css,js