gulp
了解
首先我們了解一下什么是gulp, gulp是前端自動化構建工具,在開發過程中很多重復的任務，我們都可以正確的使用gulp來完成，gulp基於nodejs,使用gulp可以做很多事情
例如gulp轉less語法，js壓縮,css壓縮,html壓縮,下面我大體說一下這個gulp的主流程
gulp
gulp的主流程
- 首先你要安裝
nodejs環境. - 全局安裝
gulp,然后你每次使用gulp的項目中還要安裝一下gulp以及你在項目中所用到的插件也安裝好. - 然后你在運行該命令行的目錄下新建一個名為
gulpfile.js,並在里面寫好配置信息， - 然后再運行
gulp任務就ok了
1.gulp的安裝
- gulp安裝前的環境配置
- 安裝
gulp的前提是你已經經有了nodejs的運行環境， - 查看是否安裝了
nodejs,如果輸出版本號，說明已經安裝了node
- 安裝
node -v
- 如果沒有安裝node，就去官網下載一下安裝即可node官方網站
- 以上步驟完成之后，先初始化一下
npm init,然后再全局安裝gulp
npm install -g gulp-cli
- 全局安裝gulp后，還需要在每個要使用gulp的項目中都單獨安裝一次。把目錄切換到你的項目文件夾中，然后在命令行中執行：
npm install gulp --save-dev
解釋一下：--save-dev是package.json文件中的依賴，最好加上
2.使用gulp
- 安裝完之后就是如何使用了，先在你這個目錄下新建一個
gulpfile.js的文件，里面寫我們定義的任務，例如以下代碼是對less轉換為css的
注意：你可以自己起一個任務名，運行的時候，直接在命令行輸入gulp 任務名，gulp也給我們定義了一個默認任務名default,如果任務名為
default,直接在命令行輸入gulp即可
先引入包
const gulp = require('gulp') //這個每次都要引入，在你使用插件的時候
const less = require('gulp-less')
// 定義任務對less進行轉換,myless是你自己定義的任務名
gulp.task('myless', function() {
// 1.匹配到要處理的文件，目錄src/less/*.less下的所有后綴名為`.less`的所有文件
gulp.src('src/less/*.less')
// 2.對less語法進行轉換!
.pipe(less())
// 3.指定文件的輸出目錄dist/css
.pipe(gulp.dest('dist/css'))
})
3.gulp常用的插件
3.1 轉換less語法
安裝npm install gulp-less --save-dev
const less = require('gulp-less')
// 定義任務對less進行轉換,myless是你自己定義的任務名
gulp.task('myless', function() {
// 1.匹配到要處理的文件，目錄src/less/*.less下的所有后綴名為`.less`的所有文件
gulp.src('src/less/*.less')
// 2.對less語法進行轉換!
.pipe(less())
// 3.指定文件的輸出目錄dist/css
.pipe(gulp.dest('dist/css'))
})
3.2 對 js 語法進行壓縮和混淆
安裝npm install gulp-uglify --save-dev
const uglify = require('gulp-uglify')
// 對js請求進行壓縮和混淆
// 定義任務
gulp.task('myscript', function() {
// 1.匹配要處理的文件
gulp.src('src/js/*.js')
// 2.將js代碼壓縮混淆
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
})
3.3 對html代碼進行壓縮
安裝npm install gulp-htmlmin --save-dev
// 對html進行壓縮的包
const htmlmin = require('gulp-htmlmin')
// 對html進行壓縮
// 定義任務
gulp.task('myhtml', function(){
// 1.匹配到要處理的html文件
gulp.src('src/*.html')
// 2.對html進行壓縮!
.pipe(htmlmin({
collapseWhitespace:true // 去除空白符
}))
// 3.輸出
.pipe(gulp.dest('dist'))
})
3.4 對css進行壓縮
安裝 npm install gulp-cssnano --save-dev
const cssnano = require('gulp-cssnano')
// 定義任務
gulp.task('mycss', function(){
// 1.
gulp.src('src/css/*.css')
.pipe(cssnano())// 消化，轉換，壓縮
.pipe(gulp.dest('dist/css'))
})
4.gulp的API
-
gulp.task
- 作用：定義一個任務:
- 示例:
-
gulp.task('任務名', function(){ // 任務內容 })
-
- 執行: 在命令行,gulpfile.js所在目錄執行
gulp 任務名
-
gulp.src
- 作用: 匹配到我們想要處理的文件!
- 示例：
-
gulp.task('任務名', function(){ // 如: './style.less' // 如: './*.less' // 如: '*.*' // 當前目錄的下所有文件! // 如: **/*.* // 當前目錄所有目錄下的所有文件 這個參數還可以是一個數組 gulp.src(['./stlyle.less','./test.less','*.*']) gulp.src('路徑字符串') .pipe(less()) // 語法轉換 .pipe(gulp.dest('文件輸出目錄')) })
-
-
gulp.dest('文件輸出目錄')
-
gulp.watch
- 作用：** 監視文件變化然后自動執行相應的任務!,不用每次都要敲命令**
// 我們還自動監視文件變化，然后執行相應任務
gulp.task('mywatch', function(){
// 監視指定文件的變化，如果變化就執行相應的任務!
gulp.watch('src/**/*.*',['mycss','myhtml','myscript','myless'])
})
注意：這里輸入的命令行的代碼是gulp 任務名，在上面的代碼中是gulp mywatch,千萬不要和webpack混淆了
- gulp.run
// 我們可以新建一個任務，用這個任務去啟動其他任務!
// 如果在命令行輸入gulp 會直接執行當前目錄的名為default的任務
gulp.task('default' ,function(){
//console.log(1111)
// run方法是用來執行其他任務
// 參數是任務名,如果寫成數組形式，那么數組中的元素就是要執行的任務名
gulp.run(['mycss','myhtml','myscript','myless'])
})
假設你有好多文件需要打包，這樣做的目的是為了你輸入命令的時候，不用再輸入好多文件名來執行了，直接輸入gulp,就是新建一個任務default，用這個任務去啟動其他任務
在gulp中也可以使用browser-sync
- 需要在當前項目目錄安裝:
npm install browser-sync --save-dev
這時候想把gulp和browser-sync合成一個命令，只能是把browser的命令省掉，用gulp來代替，那么命令省掉了，最終就要換成代碼，如下所示
//啟動boswerSync服務
browserSync.init({
server:"./src", //指定網站目錄，訪問時不需要 ，就是幫你自動刷新瀏覽器http://localhost:3000/后面
//的目錄，可以省略不寫,*這里的路徑一定要寫對*
files:["./src/**/*.*"]
})
和watch合起來的代碼：
//這個broserSync是自動幫你刷新瀏覽器
const browserSync = require('browser-sync')
//我們還自動監視文件變化，然后執行相應任務
gulp.task("mywatch",function(){
//啟動boswerSync服務
browserSync.init({
server:"./src", //指定網站目錄，訪問時不需要
//輸入這個目錄(網站根目錄就是端口號后面的目錄的父級)
files:["./src/**/*.*"]
})
// 監視指定文件的變化，如果變化就自動執行相應的任務（想監視誰，就在數組里寫誰）
gulp.watch('src/**/*.*',['myless'])
})
注意:如果更改了gulpfile.js文件要重啟我們的任務!