gulp作為一個在webpackl之前的構建工具，到現在也有很多人使用，這個使用非常的簡單。 全局安裝后需要在項目中也安裝一次哦 全局安裝 ~~~ npm install gulp -g ~~~ 項目中安裝 ~~~ npm install gulp --save-dev ~~~ 在項目根目錄下創建一個名為 gulpfile.js 的文件直接寫需要為我們執行的事就好啦 下面貼一個我項目中常用的配置： ~~~ var gulp = require('gulp'); var imgMin = require('gulp-imagemin') var uglify = require('gulp-uglify') var minifycss = require('gulp-minify-css') var autoprefixer = require('gulp-autoprefixer') //拷貝所有html文件 html壓縮沒多大意義 gulp.task('copyHtml', function() { gulp.src('productEnvironment/*.html') .pipe(gulp.dest('')) }) // 壓縮css 自動添加前綴 gulp.task('minifycss', function() { gulp.src('productEnvironment/css/*') .pipe(autoprefixer({ browsers: ['last 100 versions'], cascade: true })) .pipe(minifycss()) .pipe(gulp.dest('css')) }); //圖片壓縮 gulp.task('minImg', function() { gulp.src('productEnvironment/img/*') .pipe(imgMin()) .pipe(gulp.dest('img')) }) //壓縮js gulp.task('minijs', function() { gulp.src('productEnvironment/js/*') .pipe(uglify()) .pipe(gulp.dest('js')) }) // 默認 gulp.task('default', ['copyHtml', 'minImg', 'minijs', 'minifycss']) ~~~ 當然在使用前需要先安裝依賴。 package.json ~~~ { "name": "resume", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "" }, "author": "", "license": "ISC", "devDependencies": { "gulp": "^3.9.1", "gulp-autoprefixer": "^4.1.0", "gulp-imagemin": "^4.1.0", "gulp-minify-css": "^1.2.4", "gulp-uglify": "^3.0.0" } } ~~~