[TOC] 先安裝nodejs http://nodejs.cn/ 使用gulpjs壓縮css，js 文件和合并。 中文網站： https://www.gulpjs.com.cn/ #### **gulpjs安裝** #### 1. 全局安裝 gulp： $ npm install --global gulp 或者 $ npm install --g gulp #### 2. 作為項目的開發依賴（devDependencies）安裝： $ npm install --save-dev gulp #### 3. 安裝用來壓縮js文件的插件 $ npm install --save-dev gulp-uglify #### 4. 安裝用來壓縮css文件的插件 $ npm install --save-dev gulp-minify-css #### 5. 安裝用來合并文件的插件 $ npm install --save-dev gulp-concat #### 6. 安裝用來檢查js代碼錯誤的插件 $ npm install --save-dev gulp-jshint #### 7. 安裝用來重命名的插件 $ npm install --save-dev gulp-rename #### 8. 一起來安裝插件 $ npm install --save-dev gulp-uglify gulp-minify-css gulp-concat gulp-jshint gulp-rename #### 9. 在項目根目錄下創建一個名為 gulpfile.js 的文件： //定義依賴項 var gulp = require('gulp'); //定義合并插件 concat = require('gulp-concat'); //定義壓縮css的插件 mincss = require('gulp-minify-css'); //定義重命名插件 rename = require('gulp-rename'); //定義壓縮js的插件 minjs = require('gulp-uglify'); //定義一個名稱為css的任務 gulp.task('css',function(){ //操作css文件夾中所有的css文件 gulp.src(['css/*.css']) //執行合并插件并給合并合并文件起名稱 .pipe(concat('max.css')) //執行壓縮插件 .pipe(mincss()) //執行重命名插件 .pipe(rename({suffix:'.hd'})) //把執行以上操作過后的文件放到css1文件夾中。 .pipe(gulp.dest('css1')); }) //定義一個名稱為css的任務 gulp.task('js',function(){ //操作css文件夾中所有的css文件 //gulp.src(['js/*.js']) gulp.src(['js/a.js','js/index.js']) //執行合并插件并給合并合并文件起名稱 .pipe(concat('max.js')) //執行壓縮插件 .pipe(minjs()) //執行重命名插件 .pipe(rename({suffix:'.hd'})) //把執行以上操作過后的文件放到css1文件夾中。 .pipe(gulp.dest('js1')); }) //執行任務名為css的任務 gulp.task('default',['css','js']); //自動執行任務 gulp.watch('css/*.css',['css']); gulp.watch('js/*.js',['js']); #### 10. 使用命令行進入項目目錄（gulpfile.js同級目錄）運行命令 gulp 結果：   代碼地址：鏈接: https://pan.baidu.com/s/1i_nusPI8LsLYAAJdA6lh9w 密碼: 9pr3