gulp安裝

首先要確保pc上裝有node,然后在global環境和項目文件中都install gulp

npm install gulp -g ? (global環境)

npm install gulp --save-dev (項目環境)

在項目中install需要的gulp插件,一般只壓縮的話需要

npm install gulp-minify-css gulp-concat gulp-uglify gulp-rename del --save-dev

更多插件可以在這個鏈接中找到?http://gratimax.net/search-gulp-plugins/

在項目的根目錄新建gulpfile.js,require需要的module

var gulp = require('gulp'),

minifycss = require('gulp-minify-css'),

concat = require('gulp-concat'),

uglify = require('gulp-uglify'),

rename = require('gulp-rename'),

del = require('del');

壓縮css

gulp.task('minifycss', function() {

return gulp.src('src/*.css') ? ? ?//壓縮的文件

.pipe(gulp.dest('minified/css')) ? //輸出文件夾

.pipe(minifycss()); ? //執行壓縮

});

壓縮js

gulp.task('minifyjs', function() {

return gulp.src('src/*.js')

.pipe(concat('main.js')) ? ?//合并所有js到main.js

.pipe(gulp.dest('minified/js')) ? ?//輸出main.js到文件夾

.pipe(rename({suffix: '.min'})) ? //rename壓縮后的文件名

.pipe(uglify()) ? ?//壓縮

.pipe(gulp.dest('minified/js')); ?//輸出

});

執行壓縮前,先刪除文件夾里的內容

gulp.task('clean', function(cb) {

del(['minified/css', 'minified/js'], cb)

});

默認命令,在cmd中輸入gulp后,執行的就是這個命令

gulp.task('default', ['clean'], function() {

gulp.start('minifycss', 'minifyjs');

});

8

然后只要cmd中執行,gulp即可

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容