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') })
這里強(qiáng)調(diào)以下,gulp操作必須進(jìn)入到項(xiàng)目文件夾即node_modules文件夾所在界面才能在cmd窗口執(zhí)行g(shù)ulp操作。
4、怎樣配置js文件
上面的寫(xiě)法有一個(gè)問(wèn)題,只要有一個(gè)js文件被修改那么所有的js文件都會(huì)被重新編譯。
我們只想編譯被修改的文件怎么辦?
使用gulp-watch-path
//引入模塊:var watchPath = require('gulp-watch-path');//設(shè)置一個(gè)監(jiān)聽(tīng)js文件的人物watchjsgulp.task('watchjs',function(){ gulp.watch('src/js/**/*.js',function(event){ var paths = watchPath('event','src/','dist/')//監(jiān)聽(tīng)所有的js文件,有一個(gè)文件發(fā)生改變,則返回一個(gè)對(duì)象,該對(duì)象包含被修改js文件的相關(guān)屬性。 /* paths對(duì)象的結(jié)構(gòu)如下:{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)) }) })
如果我們?cè)诰庉嬙创a的時(shí)候出現(xiàn)格式錯(cuò)誤,怎么輸出這種錯(cuò)誤?使用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) }) })
壓縮后的代碼不存在換行符和空白符,導(dǎo)致出錯(cuò)后很難調(diào)試,好在我們可以使用 sourcemap 幫助調(diào)試
var sourcemaps = require('gulp-sourcemaps') // ... var combined = combiner.obj([ gulp.src(paths.srcPath), sourcemaps.init(), uglify(), sourcemaps.write('./'), gulp.dest(paths.distDir) ]) // ...
此時(shí) dist/js/ 中也會(huì)生成對(duì)應(yīng)的 .map 文件,以便使用 Chrome 控制臺(tái)調(diào)試代碼
gulp-autoprefixer–解析 CSS 文件并且添加瀏覽器前綴到CSS規(guī)則里。在編譯的時(shí)候會(huì)添加這些前綴
gulp.task('watchcss', function () { gulp.watch('src/css/**/*.css', function (event) { var paths = watchPath(event, 'src/', 'dist/')//用于檢測(cè)被修改的文件,返回一個(gè)對(duì)像,該對(duì)象包含一些關(guān)于被修改文件的屬性。 gulp.src(paths.srcPath)//獲取文件地址 .pipe(sourcemaps.init())//初始化對(duì)象,便于后面生成該文件的.map文件 .pipe(autoprefixer({ browsers: 'last 2 versions' }))//添加前綴 .pipe(minifycss())//執(zhí)行壓縮功能 .pipe(sourcemaps.write('./')) .pipe(gulp.dest(paths.distDir))//
相關(guān)推薦:
gulp的入門(mén)必知
聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com