首先非常不好意思,最近好久不寫(xiě)文章了,因?yàn)樽罱虑楸容^多,也比較繁忙,所以就忘記寫(xiě)文章了,今天就和大家聊聊前端構(gòu)建利器-gulp

1.什么是構(gòu)建工具?構(gòu)建工具解決了那些問(wèn)題?

• 所謂構(gòu)建工具是指通過(guò)簡(jiǎn)單配置就可以幫我們實(shí)現(xiàn)合并、壓縮、校驗(yàn)、預(yù)處理等一系列任務(wù)的軟件工具。
• 多個(gè)開(kāi)發(fā)者共同開(kāi)發(fā)一個(gè)項(xiàng)目，每位開(kāi)發(fā)者負(fù)責(zé)不同的模塊，這就會(huì)造成一個(gè)完整的項(xiàng)目實(shí)際上是由許多的“代碼版段”組成的；
• 使用less、sass等一些預(yù)處理程序，降低CSS的維護(hù)成本，最終需要將這些預(yù)處理程序進(jìn)行解析；
• 合并css、javascript，壓縮html、css、javascript、images可以加速網(wǎng)頁(yè)打開(kāi)速度，提升性能. 但是,這一系列的任務(wù)完全靠手動(dòng)完成幾乎是不可能的，借助構(gòu)建工具可以輕松實(shí)現(xiàn)。

2.構(gòu)建工具有那些?

• 構(gòu)建工具有很多例如: gulp, webpack,Grunt,F.I.S（百度出品）,最常用的是gulp,webpack我們先來(lái)了解一下gulp

3.全局安裝gulp

• 1.gulp是需要用到npm來(lái)管理的,npm是nodejs的包管理器,所以需要先下載安裝nodejs,然后在來(lái)安裝gulp
  nodejs是一個(gè)軟件包,直接安裝就行了 可以在這里下載下載nodejs
• 2.全局安裝gulp

$ npm install -g gulp --registry=https://registry.npm.taobao.org

-g 是 global 代表全局安裝
--registry=https://registry.npm.taobao.org 淘寶鏡像,因?yàn)閲?guó)外服務(wù)器比較慢,所以借助淘寶鏡像

• 3.當(dāng)安裝好了執(zhí)行

gulp -v

如果出現(xiàn)版本號(hào)代表安裝成功

4.本地安裝gulp

• 1.進(jìn)入項(xiàng)目文件里面執(zhí)行

$ npm install gulp

安裝完成會(huì)生成一個(gè)node_modules文件夾

• 2.開(kāi)始構(gòu)建項(xiàng)目,在文件夾的根目錄下面創(chuàng)建一個(gè)gulpfile.js文件
  
  根目錄下面

• 3.首先我們要明白3個(gè)目錄 src(開(kāi)發(fā)目錄) build(運(yùn)行目錄) dist(開(kāi)發(fā)目錄)

  
  
  維信公眾號(hào)coderYJ,微博coderYJ
• 4.在gulpfile.js里面寫(xiě)入代碼

var app = {  // 定義目錄
    srcPath:'src/',
    buildPath:'build/',
    distPath:'dist/'
};
/*1.引入gulp與gulp插件   使用時(shí)，要去下載這些插件*/
// 引入基礎(chǔ)模塊
var gulp = require('gulp');
// 引入less轉(zhuǎn)css插件
var less = require('gulp-less');
// 引入css代碼壓縮插件
var cssmin = require('gulp-cssmin');
// 引入js代碼壓縮插件
var uglify = require('gulp-uglify');
// 引入合并代碼插件
var concat = require('gulp-concat');
// 引入服務(wù)器連接插件
var connect = require('gulp-connect');
// 引入 圖片壓縮插件
var imagemin = require('gulp-imagemin');
// 打開(kāi)執(zhí)行他之后可以在瀏覽器中打開(kāi)
var open = require('open');
/*把bower下載的前端框架放到我們項(xiàng)目當(dāng)中*/
gulp.task('lib',function () {
    gulp.src('bower_components/**/*.js')
        .pipe(gulp.dest(app.buildPath+'lib'))
        .pipe(gulp.dest(app.distPath+'lib'))
        .pipe(connect.reload()) //當(dāng)內(nèi)容發(fā)生改變時(shí)， 重新加載。
});
/*2.定義任務(wù) 把所有html文件移動(dòng)另一個(gè)位置*/
gulp.task('html',function () {
    /*要操作哪些文件 確定源文件地址*/
    gulp.src(app.srcPath+'**/*.html')  /*src下所有目錄下的所有.html文件*/
        .pipe(gulp.dest(app.buildPath)) //gulp.dest 要把文件放到指定的目標(biāo)位置
        .pipe(gulp.dest(app.distPath))
        .pipe(connect.reload()) //當(dāng)內(nèi)容發(fā)生改變時(shí)， 重新加載。
});
/*3.執(zhí)行任務(wù) 通過(guò)命令行。gulp 任務(wù)名稱(chēng)*/
/*定義編譯less任務(wù)  下載對(duì)應(yīng)的插件 gulp-less
 * 把less文件轉(zhuǎn)成css放到build
 * */
gulp.task('less',function () {
    gulp.src(app.srcPath+'style/index.less')
        .pipe(less())
        .pipe(gulp.dest(app.buildPath+'css/'))
        /*經(jīng)過(guò)壓縮，放到dist目錄當(dāng)中*/
        .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())
});
/*同時(shí)執(zhí)行多個(gè)任務(wù) [其它任務(wù)的名稱(chēng)]
 * 當(dāng)前bulid時(shí)，會(huì)自動(dòng)把數(shù)組當(dāng)中的所有任務(wù)給執(zhí)行了。
 * */
gulp.task('build',['less','html','js','image','lib']);
/*定義server任務(wù)
 * 搭建一個(gè)服務(wù)器。設(shè)置運(yùn)行的構(gòu)建目錄
 * */
gulp.task('server',['build'],function () {
    /*設(shè)置服務(wù)器*/
    connect.server({
        root:[app.buildPath],//要運(yùn)行哪個(gè)目錄
        livereload:true,  //是否熱更新。
        port:8888  //端口號(hào)
    })
    /*監(jiān)聽(tīng)哪些任務(wù)*/
    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']);
    //通過(guò)瀏覽器把指定的地址 （http://localhost:9999）打開(kāi)。
    open('http://localhost:8888');
});
/*定義默認(rèn)任務(wù)
 * 直接執(zhí)行g(shù)ulp 會(huì)調(diào)用的任務(wù)
 * */
gulp.task('default',['server']);

gulp.task 是創(chuàng)建一個(gè)任務(wù) 里面有2個(gè)參數(shù) 第一個(gè)參數(shù)是任務(wù)的名稱(chēng) 第二個(gè)參數(shù)是回調(diào)函數(shù),要執(zhí)行的任務(wù) pipe是管道符(把前面的輸出當(dāng)作后面的輸入)

** 代表所有子目錄
*.html 代表html文件
 **/*.html代表當(dāng)前文件夾下所有的html文件
default 代表默認(rèn)
任務(wù)創(chuàng)建完畢之后在命令行 值git命令 執(zhí)行 gulp html(任務(wù)名稱(chēng)) 就可以執(zhí)行任務(wù)了
可以直接gullp 就相當(dāng)于 gulp default 

在跟目錄下面創(chuàng)建 src目錄,里面是你的工程,開(kāi)發(fā)目錄創(chuàng)建html,js/css 然后在webStrom或者你的命令行里面執(zhí)行g(shù)ulp神奇的效果就出現(xiàn)了

src下的目錄,像我的這個(gè)一樣,當(dāng)然你也可以不一樣,但是你要在gulpfile.js里面配置一下

持續(xù)更新實(shí)用的干貨
維信公眾號(hào)coderYJ
微博從coderYJ
簡(jiǎn)書(shū)coderYJ