gulp用法快速記憶

這篇文章講述的是gulp的用法有哪些，我們該如何的快速的去記憶gulp的用法，大家對gulp的用法不太了解的同學我們可以一起來看看本篇文章！

行文步驟：
1、怎麼安裝
2、怎麼使用

#一、怎麼安裝
首先你得在自己的電腦中安裝nodejs，應為gulp的運作是基於nodejs環境的。
安裝完成後，直接npm install gulp -g.(如果不能理解這句程式碼請百度吧)安裝完成後你可以直接在cmd視窗呼叫gulp功能。
二、怎麼使用
gulp的作用？
我們建立一個項目，名稱叫app，裡面有css資料夾、js資料夾、image資料夾和html檔。通常資料夾中的檔案會有空格和註釋，這些檔案傳輸起來相對比較大，傳輸效率地下。於是我們要對這些檔案進行壓縮處理就會用到gulp。
gulp怎麼用？
1、直接在專案目錄下建一個gulpfile.js文件，然後在cmd視窗執行對應指令可以執行gulpfile.js。
例如我要編譯一個js文件，app文件結構如下:

接下來我們開始寫gulpfile檔：

var gulp = require('gulp');//引入gulp模块
var uglify = require('gulp-uglify');
//引入gulp-uglify模块，用来压缩js文件。如果要压缩css文件就要引入gulp-minify-css模块。这些模块都要通过npm包管理器来安装。安装之后app文件中会自动出现一个叫node_modules的文件夹。如果你在全局安装了gulp，这里建议你进入到该项目文件夹再安装一次，避免后面gulp更新之后影响文件运行。

//执行压缩任务。创建一个名为script的任务(随意取名)，在cmd中输入gulp script会执行该任务，即运行后面的function功能
gulp.task('script',function(){
    gulp.src('js/*.js')//获取文件地址
         .pipe(uglify())//执行编压缩功能。如果是压缩css则把来自于gulp-uglify的uglify()方法转换成gulp- minify-css模块中的minifyCSS功能。
         .pipe(gulp.dest('dist/js'));//输出文件位置，在dist文件夹下的js文件夹内。如果项目中不存在dist的文件，会自动创建。
})

//编译完成，如果我们修改原js文件，要使压缩文件也自动改变怎么办。这个时候我们就要对原js文件进行监听，如果发现有改动则重新编译。代码如下：
//执行监听任务
gulp.task('auto',function(){// 创建一个监听任务。
    //监听文件修改，当文件被修改则执行script人物
    gulp.watch('js/*.js',['script']);//第一个参数表示监听的文件，第一个参数表示重新执行script人物。
})
//所有的任务要在cmd中输入gulp+任务名后才能执行。这样不太方便，可不可以在定义任务，它的作用就是执行执行之后可以执行所有的人物。
//有，如下：
//gulp.task('default')定义默认任务
//在命令行使用gulp启动script任务和auto人物
gulp.task('default',['script','auto']);
//这样我们直接在cmd中输入gulp就会执行script和auto这两个任务。

#總結以下gulp的功能：

• gulp.task('任務名稱',function(){})定義一個任務

• gulp.src()/ /找到目前的檔案位址

• gulp.desk()//輸出檔案

• gulp.pipe()//可以理解為管道，將操作加入到執行佇列。

三、其它檔案壓縮或編譯(比較js即可)
1、編譯css檔案
區塊名稱：gulp-minify-css
壓縮檔案函數:minifyCSS

2、壓縮圖片
區塊名稱:gulp- imagemin
壓縮檔函數：imagemin({progressive})

#3、編譯less
區塊名稱:gulp-less
編譯方法:less();

四、使用gulp建立一個專案

#1、cmd中建立package.json設定檔，其中有你的依賴套件資訊。
     安裝對應模組，模組名稱會被加入到package.json當中。
2、設計目錄結構
    將檔案分為2類dist/目錄下是壓縮後的程式碼，src/下是原始碼檔案。

如何讓gulp自帶的輸出帶有時間和顏色，gulp-util 具有相同的效果，不過其顏色效果更豐富。
 引入模組gulp-util

var  gutil = require('gulp-util');
gulp.task('default',function(){
    gutil.log('message')
    gutil.log(gutil.colors.red('error'))
    gutil.log(gutil.colors.green('message')+'some')
})

這裡強調以下，gulp操作必須進入到專案資料夾即node_modules資料夾所在介面才能在cmd視窗執行gulp操作。
4、怎麼設定js檔
上面的寫法有一個問題，只要有一個js檔案被修改那麼所有的js檔案就會被重新編譯。
我們只想編譯被修改的檔案怎麼辦？
使用gulp-watch-path

//引入模块:var watchPath = require('gulp-watch-path');//设置一个监听js文件的人物watchjsgulp.task('watchjs',function(){
     gulp.watch('src/js/**/*.js',function(event){
     var paths = watchPath('event','src/','dist/')//监听所有的js文件，有一个文件发生改变，则返回一个对象，该对象包含被修改js文件的相关属性。
         /*
           paths对象的结构如下:{srcPath:'src/js/log.js',
           distPath:'dist/js/log.js',
           distDir:'dist/js/',
           srcFilename:'log.js',
           distFilename:'log.js'}
         */ 
      gulp.src(paths.srcPath)
          .pipe( uglify())
          .pipe(gulp.dest(paths.distDir))


})


})

如果我們在編輯原始碼的時候出現格式錯誤，怎麼輸出這個錯誤?使用stream-combiner2

var handleError = function (err) {
var colors = gutil.colors;
console.log('\n')
gutil.log(colors.red('Error!'))
gutil.log('fileName: ' + colors.red(err.fileName))
gutil.log('lineNumber: ' + colors.red(err.lineNumber))
gutil.log('message: ' + err.message)
gutil.log('plugin: ' + colors.yellow(err.plugin))
}
var combiner = require('stream-combiner2')
gulp.task('watchjs', function () {
gulp.watch('src/js/**/*.js', function (event) {
var paths = watchPath(event, 'src/', 'dist/')

var combined = combiner.obj([
gulp.src(paths.srcPath),
uglify(),
gulp.dest(paths.distDir)
])
combined.on('error', handleError)
})
})

壓縮後的程式碼不存在換行符和空白符，導致出錯後很難調試，好在我們可以使用sourcemap 幫助調試

var sourcemaps = require('gulp-sourcemaps')
// ...
var combined = combiner.obj([
gulp.src(paths.srcPath),
sourcemaps.init(),
uglify(),
sourcemaps.write('./'),
gulp.dest(paths.distDir)
])
// ...

此時dist/js/ 中也會產生對應的.map 文件，以便使用Chrome 控制台調試程式碼

gulp-autoprefixer–解析CSS 檔案並且加入瀏覽器前綴到CSS規則裡。在編譯的時候會加入這些前綴

gulp.task('watchcss', function () {
gulp.watch('src/css/**/*.css', function (event) {
var paths = watchPath(event, 'src/', 'dist/')//用于检测被修改的文件，返回一个对像，该对象包含一些关于被修改文件的属性。
gulp.src(paths.srcPath)//获取文件地址
.pipe(sourcemaps.init())//初始化对象，便于后面生成该文件的.map文件
.pipe(autoprefixer({
browsers: 'last 2 versions'
}))//添加前缀
.pipe(minifycss())//执行压缩功能
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(paths.distDir))//输出文件
})
})

相關推薦：

gulp的入門必知

以上是gulp用法快速記憶的詳細內容。更多資訊請關注PHP中文網其他相關文章！