// npm修改成淘寶鏡像(保證全部依賴下載速度和不丟包的狀況)
npm install -g cnpm --registry=https://registry.npm.taobao.org
// 安裝gulp
cnpm install --save-dev gulp
複製代碼
3.做爲項目的開發依賴(devDependencies)安裝:好比在文件gulp下執行下面這條命令css
npm install --save-dev gulp
複製代碼
4.項目根目錄新建gulpfiles.js 文件 (根目錄就是gulp) a. dist 壓縮文件 b. gulpfirst(項目文件,此文件隨我的習慣) c. gulpfile.js 任務代碼文件 d. package.json 依賴文件配置文件(項目依賴須要使用npm install --save 模塊名)下載 html
// gulpfile.js文件的基本配置
// 依賴
var gulp = require('gulp'),
// 清除
clean = require("gulp-clean"),
// 壓縮html
htmlmin = require('gulp-htmlmin'),
// 壓縮js
uglify = require('gulp-uglify'),
// 壓縮css
cssUglify = require('gulp-minify-css'),
// 構建服務 gulp server
connect = require('gulp-connect');
// gulp.task(name, fn) - 定義任務,第一個參數是任務名,第二個參數是任務內容。
// gulp.src(path) - 選擇文件,傳入參數是文件路徑。
// gulp.dest(path) - 輸出文件
// gulp.pipe() - 管道,你能夠暫時將 pipe 理解爲將操做加入執行隊列
// 壓縮 js 文件
gulp.task('js', function() {
// 1. 找到文件
return gulp.src('./gulpfirst/js/*.js')
// 2. 壓縮文件
.pipe(uglify())
// 3. 另存壓縮後的文件
.pipe(gulp.dest('./dist/js'))
});
// 壓縮css文件
gulp.task('css',function(){
return gulp.src('./gulpfirst/css/*.css')
.pipe(cssUglify())
.pipe(gulp.dest('./dist/css'))
});
// 壓縮html文件
gulp.task('html', function () {
return gulp.src("./gulpfirst/*.html")
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest("./dist/"));
});
// 執行清空任務
gulp.task("clean", function(){
console.log('開始清空dist文件夾 --不清空img ');
return gulp.src(['./dist/*.html','./dist/css/*','./dist/js/*.js'])
.pipe(clean());
});
// 默認任務執行
gulp.task('default',gulp.series('clean','html','css','js'));
//創建一個配置對象變量,後面咱們要傳遞給插件用來啓動server
var serverConfig={
root:'gulpfirst',//從哪一個目錄開啓server
port:8080,//將服務開啓在哪一個端口
}
//創建一個server任務 直接能夠用 gulp server就能夠執行這個任務
gulp.task('server', function() {
connect.server(serverConfig);
});
複製代碼
// 文件編譯
gulp
// z在根目錄或者dist文件下
gulp server
複製代碼