小白初試gulp（一）

基於gulp4

1安裝

首先在空項目中創建package.json

$ npm init 
複製代碼

安裝gulp

$ npm install --global gulp    //全局安裝
$ npm install --save-dev gulp  //做爲項目的開發依賴
複製代碼

安裝gulp插件

$ npm install gulp-rename --save-dev //文件重命名
$ npm install gulp-uglify --save-dev //js壓縮
$ npm install gulp-minify-css --save-dev //css壓縮
$ npm install gulp-concat --save-dev //文件合併
$ npm install gulp-connect --save-dev //啓動web服務
$ npm install gulp-load-plugins  --save-dev//使用插件管理自動處理package.json中的插件 
$ npm install gulp-order  --save-dev//控制處理的文件順序
複製代碼

2配置gulpfile.js

在根目錄新建gulpfile.js文件並寫入

var gulp = require('gulp');
gulp.task('default', function() {
  // 將你的默認的任務代碼放在這
});
複製代碼

gulp提供的方法
1.gulp.task 建立一個任務。如上 在命令行執行 gulp default ,將會執行function中的代碼。
2.gulp.src 得到須要處理的文件，多個文件以數組方式
3.gulp.dest 處理完成文件寫入目錄
4.gulp.series 順序運行任務序列
5.gulp.parallel 並行運行任務序列

流處理方法
1.pipe將流傳遞下去進行處理

gulpfile.js完整代碼

var gulp = require('gulp');
//var rename = require('gulp-rename');//重命名
//var uglify=require('gulp-uglify');//js壓縮
//var minifyCss = require("gulp-minify-css");//壓縮CSS
//var jshint = require("gulp-jshint");//js檢查
//var concat = require("gulp-concat");//文件合併
var plugins = require('gulp-load-plugins')();
//以後使用 plugins.rename 至關於 rename = require('gulp-rename');
//--minify-css 改成駝峯minifyCss
//plugins.minifyCss()

gulp.task('commoncss',function(){
    return gulp.src(['app/lib/css/*.css','app/css/mystyle.css'])//傳入多個不一樣路徑
    .pipe(plugins.order([//處理文件排序
        'reset.css',
        '*.css',
        'mystyle.css'
    ]))
    .pipe(plugins.minifyCss())//css壓縮
    .pipe(plugins.concat('common.min.css'))//合併到 common.min.css 中
    .pipe(gulp.dest('app/dist/css'))
})

gulp.task('commonjs', function() {
    return gulp.src(['app/lib/js/*.js','app/js/mymain.js'])//傳入多個不一樣路徑
    .pipe(plugins.order([//處理文件排序
        'jquery.min.js',
        '*.js',
        'mymain.js'
    ]))
   .pipe(plugins.rename({suffix:'.min'})) //重命名增長.min後綴
   .pipe(plugins.uglify()) //js 壓縮
   .pipe(plugins.concat('common.min.js'))//合併到 common.min.js 中
   .pipe(gulp.dest('app/dist/js'))  //輸出到 這個目錄  
})

gulp.task('myjs',function(){
    return gulp.src('app/js/mymain.js')
    .pipe(plugins.uglify())
    .pipe(plugins.rename({suffix:'.min'})) 
    .pipe(gulp.dest('app/dist/js'))
})

gulp.task("mycss",function(){
    return gulp.src('app/css/mystyle.css')
    .pipe(plugins.rename({suffix:'.min'}))
    .pipe(plugins.minifyCss())
    .pipe(gulp.dest('app/dist/css'))
})

gulp.task('defaultA',gulp.series('commoncss','commonjs'));

gulp.task('defaultB',gulp.parallel('mycss','myjs'));

gulp.task('webserver', function() {
    plugins.connect.server({
        root: 'app',//項目目錄
        port: 8000,
        livereload: true
    });
});
複製代碼