gulp的使用

  1. 電腦安裝node 官網下載node安裝,由於gulp的依賴是基於node環境下使用的。
  2. 全局安裝gulp
// 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);
});
複製代碼
  1. 使用gulp項目編譯和啓動項目
// 文件編譯
 gulp
// z在根目錄或者dist文件下
gulp server
複製代碼
相關文章
相關標籤/搜索