gulp的使用(二)之gulpfile.js文件的配置

Gulpfile.js是什麼文件:

gulp是前端開發過程當中對代碼進行構建的工具，是自動化項目的構建利器；她不只能對網站資源進行優化，並且在開發過程當中不少重複的任務可以使用正確的工具自動完成；使用她，咱們不只能夠很愉快的編寫代碼，並且大大提升咱們的工做效率。

而gulpfile.js就是幫助gulp實現自動化管理項目功能的核心文件.

 

 

步驟1: 在命令行中安裝gulp插件(前提是安裝了gulp: npm install gulp -g)

能夠同時下載多個插件:

cnpm install gulp gulp-less gulp-cssmin gulp-uglify gulp-concat gulp-connect gulp-imagemin open --save-dev

說明1: 由於npm安裝插件是從國外服務器下載，受網絡影響大，可能出現異常，因此建議使用cnpm。

說明2: 項目依賴分兩種，

--save:一個就是普通的項目依賴好比bootstrap，還用一種只是開發階段須要用的，

--save-dev這種屬於開發依賴好比gulp，開發依賴最終記錄在devDependencies節點裏面

說明3: 一些經常使用的gulp插件:

1. gulp-less: 把less文件轉成css文件

2.gulp-clean-css：css文件壓縮。
3.gulp-uglify：js壓縮
4.gulp-concat：js合併
5.gulp-rename：重命名，給js壓縮文件添加.min後綴
6.gulp-jshint：js語法檢查

 

步驟2: 在項目文件夾下面建立一個名叫gulpfile.js的文件夾,在上面的插件下載完畢後,就能夠配置相關代碼的管理功能了:

 

步驟3: 開始打開gulpfile.js文件寫代碼配置(以gulp-less插件爲例子):

 1 var gulp = require('gulp'),//載入gulp模塊
 2 
 3     less = require('gulp-less')；//載入須要用到的插件
 4 //定義一個testLess任務（自定義任務名稱）
 5 
 6 gulp.task('testLess', function () {
 7 
 8     gulp.src('less/*.less')       //該任務針對的文件
 9 
10         .pipe(less())             //該任務調用的模塊
11 
12         .pipe(gulp.dest('css'));  //將會在css下生成index.css
13 
14 });
15 
16 //監聽less文件
17 
18 gulp.task('gulpWatch',function(){
19 gulp.watch('less/*.less',['testLess']);
20 });
21 //同時讓默認程序執行一次，能夠提升開始執行速度。
22 
23 gulp.task('default',['testLess','gulpWatch']);

最後在你的當前項目命令行中輸入gulp執行便可。你會看到在相關的路徑下生成對應的css文件。

可是,通常咱們在公司,都不須要本身去配置這樣一個文件,由於每次開發項目的時候均可以使用公司已經配置好的gulpfile.js文件,
把下面的代碼拷貝到本身建立的gulpfile.js文件中便可使用:

代碼以下:

var app = {  // 定義目錄
    srcPath:'src/',
    buildPath:'build/',
    distPath:'dist/'
}

/*1.引入gulp與gulp插件   使用時，要去下載這些插件*/
var gulp = require('gulp');
var less = require('gulp-less');
var cssmin = require('gulp-cssmin');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var connect = require('gulp-connect');
var imagemin = require('gulp-imagemin');
var open = require('open');

/*把bower下載的前端框架放到咱們項目當中*/
gulp.task('lib',function () {
    gulp.src('bower_components/**/*.js')
        .pipe(gulp.dest(app.buildPath+'lib'))
        .pipe(gulp.dest(app.distPath+'lib'))
        .pipe(connect.reload()) //當內容發生改變時， 從新加載。
});



/*2.定義任務 把全部html文件移動另外一個位置*/
gulp.task('html',function () {
    /*要操做哪些文件 肯定源文件地址*/
    gulp.src(app.srcPath+'**/*.html')  /*src下全部目錄下的全部.html文件*/
        .pipe(gulp.dest(app.buildPath)) //gulp.dest 要把文件放到指定的目標位置
        .pipe(gulp.dest(app.distPath))
        .pipe(connect.reload()) //當內容發生改變時， 從新加載。
});
/*3.執行任務 經過命令行。gulp 任務名稱*/
/*定義編譯less任務  下載對應的插件 gulp-less
 * 把less文件轉成css放到build
 * */
gulp.task('less',function () {
    gulp.src(app.srcPath+'style/index.less')
        .pipe(less())
        .pipe(gulp.dest(app.buildPath+'css/'))
        /*通過壓縮，放到dist目錄當中*/
        .pipe(cssmin())
        .pipe(gulp.dest(app.distPath+'css/'))
        .pipe(connect.reload())
});

/*合併js*/
gulp.task('js',function () {
    gulp.src(app.srcPath+'js/**/*.js')
        .pipe(concat('index.js'))
        .pipe(gulp.dest(app.buildPath+'js/'))
        .pipe(uglify())
        .pipe(gulp.dest(app.distPath+'js'))
        .pipe(connect.reload())
});

/*壓縮圖片*/
gulp.task('image',function () {
    gulp.src(app.srcPath+'images/**/*')
        .pipe(gulp.dest(app.buildPath+'images'))
        .pipe(imagemin())
        .pipe(gulp.dest(app.distPath+'images'))
        .pipe(connect.reload())
});

/*同時執行多個任務 [其它任務的名稱]
 * 當前bulid時，會自動把數組當中的全部任務給執行了。
 * */
gulp.task('build',['less','html','js','image','lib']);


/*定義server任務
 * 搭建一個服務器。設置運行的構建目錄
 * */
gulp.task('server',['build'],function () {
    /*設置服務器*/
    connect.server({
        root:[app.buildPath],//要運行哪一個目錄
        livereload:true,  //是否熱更新。
        port:9999  //端口號
    })
    /*監聽哪些任務*/
    gulp.watch('bower_components/**/*',['lib']);
    gulp.watch(app.srcPath+'**/*.html',['html']);
    gulp.watch(app.srcPath+'js/**/*.js',['js']);
    gulp.watch(app.srcPath+'images/**/*',['image']);
    gulp.watch(app.srcPath+'style/**/*.less',['less']);

    //經過瀏覽器把指定的地址 （http://localhost:9999）打開。
    open('http://localhost:9999');
});

/*定義默認任務
 * 直接執行gulp 會調用的任務
 * */
gulp.task('default',['server']);