前端程序員之gulp入門

ulp入門

1、確定目錄結(jié)構(gòu)

-xiangmu
	-src     //源碼
		+pages   //html
		+css	//css
		+js		//js

2、常用API

gulp.task()
含義：gulp.task(任務(wù)名稱，任務(wù)處理函數(shù))
作用：創(chuàng)建任務(wù)
gulp.task('html',function(){
    //找到html源文件，進(jìn)行壓縮，打包，放入指定目錄
})

gulp.src()
含義： gulp.src(路徑信息)
作用：找到源文件
書寫方式：
gulp.src('./a/b.html')->找到指定的一個(gè)文件
gulp.src('./a/*.html')->找到指定目錄下，指定后綴的所有文件
gulp.src('./a/**')->找到指定目錄下的所有文件
gulp.src('./a/** /*')->找到a目錄下所有子目錄里面的所有文件
gulp.src('./a/** /*.html')->找到a目錄下所有子目錄里面的所有.html文件

gulp.dest()
含義：gulp.dest(路徑信息)
作用：把一個(gè)內(nèi)容放入指定目錄內(nèi)
gulp.dest('./abc')
	->把他接收到的內(nèi)容放到abc目錄下

gulp.watch()
含義：gulp.watch(路徑信息，任務(wù)名稱)
作用：監(jiān)控指定目錄文件下的文件，一旦發(fā)生變化，重新執(zhí)行后面的任務(wù)
gulp.watch('./src/pages/*.html',html)
	->當(dāng)指定目錄下的html文件發(fā)生變化， 就會(huì)執(zhí)行html這個(gè)任務(wù)

gulp.series()
含義：按照同步順序執(zhí)行任務(wù)
語法：gulp.series(任務(wù)1，任務(wù)2，任務(wù)3。。。)
作用：逐個(gè)執(zhí)行多個(gè)任務(wù)，前一個(gè)任務(wù)結(jié)束，第二個(gè)任務(wù)開始

gulp.parallel()
含義：按照異步執(zhí)行任務(wù)
語法：gulp.parallel(任務(wù)1，任務(wù)2，任務(wù)3.。。)
作用：并行開始多個(gè)任務(wù)

pipe()
管道函數(shù)
進(jìn)入下一個(gè)流過程的管道函數(shù)
gulp.src().pipe(壓縮任務(wù)).pipe(轉(zhuǎn)碼).pipe(gulp.dest('abc'))

3、打包c(diǎn)ss任務(wù)

下載：npm i gulp-cssmin -S
導(dǎo)入：const cssmin=require('gulp-cssmin')

下載：npm i gulp-autoprefixer -S
導(dǎo)入：const autoPrefixer=require('gulp-autoprefixer')

const cssHandler=function (){
    return gulp
    	.src('./src/css/*.css')
    	.pipe(autoPrefixer())
    	.pipe(cssmin())
    	.pipe(gulp.dest('./dist/css/'))
}
//需要將這個(gè)函數(shù)導(dǎo)出
module.exports.cssHandler=cssHandler
//執(zhí)行指令gulp cssHandler

4、打包js任務(wù)

下載:npm i -S gulp-uglify
導(dǎo)入:const uglify=require('gulp-uglify')

下載將es6轉(zhuǎn)為es5的插件
npm i -S gulp-babel
npm i -S @babel/core
npm i -S @babel/preset-env

const gulp=require('gulp')
const uglify=require('gulp-uglify')
const babel=require('gulp-babel')

const jsHandler=function(){
       return gulp
    	.src('./src/js/*.js')
    	.pipe(babel({
           //如果是babel@7版本，就寫presets:['es2015']
           presets:['@babel/ennv']   //babel@8版本
       }))
    	.pipe(uglify())  //壓縮
    	.pipe(gulp.dest('./dist/js/'))
}
module.exports.jsHandler=jsHandler

//執(zhí)行指令gulp jsHandler

5、打包html任務(wù)

下載：npm i -S gulp-htmlmin
導(dǎo)入：const htmlmin=require('gulp-htmlmin')

const gulp=require('gulp')
const htmlmin=require('gulp-htmlmin')

const htmlHandler=function(){
       return gulp
    	.src('./src/html/*.html')
    	.pipe(htmlmin({
           collapseWhitespace:true, //表示移除空格和換行
           removeEmptyAttributes:true,//表示移除空的屬性(僅限于原生屬性class、id等等)
           collapseBooleanAttributes:true,//移除checked類似的布爾值屬性
           minifyCSS:true,//壓縮內(nèi)嵌式css代碼(只能基本壓縮，不能自動(dòng)添加前綴)
           minifyJS:true,//壓縮內(nèi)嵌式j(luò)s代碼(只能基本壓縮，不能轉(zhuǎn)碼)
           removeStyleLinkTypeAttributes:true, //移除style和link標(biāo)簽上的type屬性
       }))   //通過配置的參數(shù)進(jìn)行壓縮
    	.pipe(gulp.dest('./dist/html/'))
}
module.exports.htmlHandler=htmlHandler

//執(zhí)行指令gulp htmlHandler

6、配置默認(rèn)任務(wù)執(zhí)行打包（二選一）

//異步方法
module.exports.default=gulp.parallel(cssHandler,htmlHandler,jsHandler) 
//同步方法
module.exports.default=gulp.series(cssHandler,htmlHandler,jsHandler)	

//進(jìn)行打包   gulp default 或者gulp

還不會(huì)gulp的朋友們趕緊收藏起來吧。有不懂的可以留言。

們在前兩篇文章中介紹了gulp環(huán)境搭建和配置，也簡單的講了一個(gè)css代碼壓縮的插件。因?yàn)間ulp插件實(shí)在是太多，沒有辦法給童靴們一一去講了，望童靴們見諒。

下面附上小編初學(xué)gulp時(shí)配置的一個(gè)項(xiàng)目的代碼，供大家學(xué)習(xí)與參考。

安裝插件的命令行：cnpm install 插件名 --save-dev

var gulp = require("gulp"),
del = require("del"), //清空數(shù)據(jù)
concat = require("gulp-concat"), //文件合并
rename = require("gulp-rename"), //重命名
sass = require("gulp-ruby-sass"), //sass編譯
less = require('gulp-less'), //less編譯
minifyCss = require("gulp-minify-css"), //css壓縮
cleancss = require('gulp-clean-css'),
autoprefixer = require("gulp-autoprefixer"), //自動(dòng)補(bǔ)全css前綴
uglify = require("gulp-uglify"), //js壓縮
jshint = require("gulp-jshint"), //js格式檢查
notify = require("gulp-notify"), //消息通知
connect = require('gulp-connect'), //WEB測試服務(wù)器
livereload = require("gulp-livereload"), //自動(dòng)刷新
cache = require("gulp-cache"), //圖片緩存，只有圖片替換了才壓縮
images = require("gulp-imagemin"), //圖片壓縮
pngquant = require('imagemin-pngquant'), //圖片壓縮
gulpReactify = require('gulp-reactify'),
reactTools = require('react-tools'),
browserSync = require('browser-sync').create();
var path={
src : "src/",
html : "src/html/",
css : "src/css/",
js : "src/js/",
sass : "src/sass/",
img : "src/images",
}
/*-----------------移動(dòng)html---------------*/
gulp.task("html",function(){
return gulp.src(path.html+'**/*')
.pipe(gulp.dest("dist/html"))
.pipe(browserSync.stream());
})
gulp.task("html1",function(){
return gulp.src(path.src+'*.html')
.pipe(gulp.dest("dist"))
.pipe(browserSync.stream());
})
/*-----------------壓縮css---------------*/
gulp.task("minifyCss",function(){
return gulp.src(path.css+'*.css')
.pipe(minifyCss())
.pipe(gulp.dest('dist/css'))
.pipe(browserSync.stream());
})
/*-----------------壓縮js---------------*/
gulp.task("uglify",function(){
return gulp.src(path.js+"*.js")
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
.pipe(browserSync.stream());
})
/*-----------------復(fù)制目錄---------------*/
gulp.task('copy', function() {
return gulp.src('src/js/public/**/*')
.pipe(gulp.dest('dist/js/public'))
});
/*---------------- 編譯 SASS 自動(dòng)補(bǔ)全前綴 ----------------*/
//gulp.task('sass', function(){
//return sass(path.sass+'*.scss')
//.pipe(autoprefixer({browsers: ['last 2 versions', 'safari 5', 'opera 12.1', //'ios 6', 'android 4']}))
// .pipe(gulp.dest(path.css))
//.pipe(minifyCss())
//.pipe(gulp.dest('dist/css'))
//.pipe(browserSync.stream());
//});
/*---------------- 壓縮圖片 ----------------*/
gulp.task('images', function(){
return gulp.src('src/images/*.{png,jpg,gif,ico}')
.pipe(cache(images({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(images({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
}))
.pipe(gulp.dest('dist/images'))
});
/*---------------- Clean ----------------*/
//gulp.task('clean',del.bind(null,['dist/**/*']));
/*---------------- 測試服務(wù)器 ----------------*/
// gulp.task('default', ['connectDev', 'watch']);
/*---------------- reload server ----------------*/
// gulp.task('reload-dev',['uglify','minifyCss','images'],function() {
// gulp.src(path.src + '**/*.*')
// .pipe(connect.reload());
// });
//server
gulp.task('server',function(){
browserSync.init({
port:8087,
server:{
baseDir:"./src"
}
})
})
/*--------------監(jiān)聽--------------------*/
gulp.task('watch',function(){
gulp.watch('src/css/*.css',['minifyCss']) //（監(jiān)聽文件的路徑，[監(jiān)聽的任務(wù)名稱]）
gulp.watch('src/js/*.js',['uglify'])
gulp.watch('src/html/**/*',['html'])
gulp.watch('src/*.html',['html1'])
gulp.watch('src/images/**/*.*',['images'])
gulp.watch('src/js/public/**/*',['copy'])
})
/*--------------默認(rèn)命令--------------------*/
gulp.task('run',function(){
gulp.start('html','html1','minifyCss','uglify','copy','images','watch','run','server')
})

安裝插件的一些注意事項(xiàng)

1.注意安裝js格式檢查：只安裝 gulp-jshint會(huì)報(bào)錯(cuò)，還需要安裝：npm install jshint --save-dev。

2.使用gulp-ruby-sass時(shí)，用sass不是gulp.src來編譯Sass文件。

gulp-sass:依賴于node-sass這個(gè)庫,node-sass是對(duì)libsass的Node綁定

*兩者不同*

gulp-ruby-sass是調(diào)用sass，所以需要ruby環(huán)境，需要生成臨時(shí)目錄和臨時(shí)文件

gulp-sass是調(diào)用node-sass,有node.js環(huán)境就夠了，編譯過程不需要臨時(shí)目錄和文件，直接通過buffer內(nèi)容轉(zhuǎn)換。

愛學(xué)習(xí)的孩子運(yùn)氣不會(huì)差哦~

關(guān)注小白前端，持續(xù)收到文章推送！

ulp是是前端開發(fā)對(duì)代碼進(jìn)行構(gòu)建的工具，是基于 Nodejs 的自動(dòng)任務(wù)運(yùn)行器，他能自動(dòng)化地完成 javascript/coffee/sass/less/html/image/css 等文件的的測試、檢查、合并、壓縮、格式化、瀏覽器自動(dòng)刷新、部署文件生成，并監(jiān)聽文件在改動(dòng)后重復(fù)指定的這些步驟。在開發(fā)中使用能有效提高工作效率，使用：

既是基于Nodejs的任務(wù)運(yùn)行器，自然就需要先安裝Nodejs環(huán)境，以下便是安裝步驟：

安裝nodejs -> 全局安裝gulp -> 項(xiàng)目安裝gulp以及gulp插件 -> 配置gulpfile.js -> 運(yùn)行任務(wù)

1. 安裝 NodeJS 環(huán)境

到nodeJS官網(wǎng)選擇下載，運(yùn)行安裝包安裝即可。

2.初始化，生成package.json 文件：

在項(xiàng)目文件夾下打開命令提示符執(zhí)行下列命令（打開方式：shift+鼠標(biāo)右鍵，在此處打開明亮窗口）：

npm init

選裝 cnpm( npm淘寶鏡像 )：

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

3. 全局安裝 gulp

npm install gulp -g

全局安裝好后，可以在命令提示符下使用 gulp 的命令行工具（使用 gulp 命令）

gulp -v

**以上全局安裝一次即可**

4. 在項(xiàng)目目錄中生成 package.json 文件

npm init

使用默認(rèn)輸入，一路回車即可

或：npm init -y

5. 在項(xiàng)目本地安裝 gulp(安裝好后，在項(xiàng)目目錄下生成 node_modules 文件夾)

npm install gulp --save-dev

或

npm i gulp --save-dev

或

npm i gulp -D

6. 安裝 gulp 插件：

gulp-clean-css(壓縮CSS)

npm install gulp-clean-css -D

gulp-htmlmin(壓縮html)

npm i gulp-htmlmin -D

gulp-babel(將ES6的代碼轉(zhuǎn)換為ES5的代碼)

npm install gulp-babel babel-core babel-preset-env --save-dev

gulp-uglify(壓縮JS)

npm i gulp-uglify -D

gulp-rename(重命名)

npm i gulp-rename -D

gulp-imagemin(壓縮圖片)

gulp-concat(合并文件)

gulp-connect ( webserver 能夠部署靜態(tài)資源，能夠?qū)崿F(xiàn)瀏覽器自動(dòng)刷新--需要瀏覽器插件支持--livereload)

npm i gulp-connect（連接）

7. 在項(xiàng)目根目錄下，創(chuàng)建 gulpfile.js(固定名稱) 的文件：

**gulpfile.js：**

//引入模塊

const gulp = require("gulp"),

connect = require("gulp-connect"),

sass = require("gulp-sass");

//定制，啟動(dòng)服務(wù)器

gulp.task("connect",function(){

connect.server({

root:"dist",//webserver的根目錄

livereload:true//瀏覽器自動(dòng)刷新

});

//復(fù)制HTML文件到dist目錄下，讓HTML頁面重新加載

gulp.task("html",function(){

gulp.src("src/**/*.html")

.pipe(gulp.dest("dist"))

.pipe(connect.reload());

});

//復(fù)制js文件到dist目錄下,js重新加載

gulp.task("js",function(){

gulp.src("src/js/**/*.js")

.pipe(gulp.dest("dist/js"))

.pipe(connect.reload());//瀏覽器自動(dòng)刷新

});

//復(fù)制lib目錄到dist下

gulp.task("copy-lib",function(){

gulp.src("src/lib/**/*.*")

.pipe(gulp.dest("dist/lib"))

});

//復(fù)制img目錄到dist下

gulp.task("copy-img",function(){

gulp.src("src/img/**/*.*")

.pipe(gulp.dest("dist/img"))

});

//復(fù)制mock目錄到dist下

gulp.task("copy-mock",function(){

gulp.src("src/mock/**/*.*")

.pipe(gulp.dest("dist/mock"))

});

gulp.task("copy",["copy-lib","copy-img","copy-mock"])

//編譯*.scss文件為*.css

gulp.task("sass",function(){

gulp.src("src/sass/*.scss")

.pipe(sass({outputStyle:"compressed"}))

.pipe(gulp.dest("dist/css"))

.pipe(connect.reload());

})

//監(jiān)視文件的修改

gulp.task("watch",function(){

gulp.watch("src/sass/*.scss",["sass"]);

gulp.watch("src/**/*.html",["html"]);

gulp.watch("src/js/**/*.js",["js"]);

});

//定制默認(rèn)（缺省）任務(wù)

gulp.task("default",["html","js","sass","copy","connect","watch"])

8. 在命令行中執(zhí)行任務(wù)：

gulp 任務(wù)名稱

或 gulp

9.本地訪問localhost或本機(jī)IP即可運(yùn)行項(xiàng)目

Gulp運(yùn)行成功結(jié)果如下：

在線咨詢

上一篇：如何在網(wǎng)頁中使用 web 字體？
下一篇：我們應(yīng)該如何寫好HTML&CSS

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

前端程序員之gulp入門

ulp入門

安裝插件的一些注意事項(xiàng)

您的項(xiàng)目需求