gulp的使用(二)之gulpfile.js文件的配置
Gulpfile.js是什麽文件:
gulp是前端開發過程中對代碼進行構建的工具，是自動化項目的構建利器；她不僅能對網站資源進行優化，而且在開發過程中很多重復的任務能夠使用正確的工具自動完成；使用她，我們不僅可以很愉快的編寫代碼，而且大大提高我們的工作效率。
而gulpfile.js就是幫助gulp實現自動化管理項目功能的核心文件.
步驟1: 在命令行中安裝gulp插件(前提是安裝了gulp: npm install gulp -g)
可以同時下載多個插件:
cnpm install gulp gulp-less gulp-cssmin gulp-uglify gulp-concat gulp-connect gulp-imagemin open --save-dev
說明1: 因為npm安裝插件是從國外服務器下載，受網絡影響大，可能出現異常，所以建議使用cnpm。
說明2: 項目依賴分兩種，
--save:一個就是普通的項目依賴比如bootstrap，還用一種只是開發階段需要用的，
--save-dev這種屬於開發依賴比如gulp，開發依賴最終記錄在devDependencies節點裏面
說明3: 一些常用的gulp插件:
1. gulp-less: 把less文件轉成css文件
2.gulp-clean-css：css文件壓縮。
3.gulp-uglify：js壓縮
4.gulp-concat：js合並
5.gulp-rename：重命名，給js壓縮文件添加.min後綴
6.gulp-jshint：js語法檢查
步驟2: 在項目文件夾下面創建一個名叫gulpfile.js的文件夾,在上面的插件下載完畢後,就可以配置相關代碼的管理功能了:
步驟3: 開始打開gulpfile.js文件寫代碼配置(以gulp-less插件為例子):
1 var gulp = require(‘gulp‘),//載入gulp模塊 2 3 less = require(‘gulp-less‘)；//載入需要用到的插件 4 //定義一個testLess任務（自定義任務名稱） 5 6 gulp.task(‘testLess‘, function () { 7 8 gulp.src(‘less/*.less‘) //該任務針對的文件 9 10 .pipe(less()) //該任務調用的模塊 11 12 .pipe(gulp.dest(‘css‘)); //將會在css下生成index.css 13 14 }); 15 16 //監聽less文件 17 18 gulp.task(‘gulpWatch‘,function(){ 19 gulp.watch(‘less/*.less‘,[‘testLess‘]); 20 }); 21 //同時讓默認程序執行一次，可以提高開始執行速度。 22 23 gulp.task(‘default‘,[‘testLess‘,‘gulpWatch‘]);
最後在你的當前項目命令行中輸入gulp執行即可。你會看到在相關的路徑下生成對應的css文件。
但是,一般我們在公司,都不需要自己去配置這樣一個文件,因為每次開發項目的時候都可以使用公司已經配置好的gulpfile.js文件,
把下面的代碼拷貝到自己創建的gulpfile.js文件中即可使用:
代碼如下:
var app = { // 定義目錄 srcPath:‘src/‘, buildPath:‘build/‘, distPath:‘dist/‘ } /*1.引入gulp與gulp插件 使用時，要去下載這些插件*/ var gulp = require(‘gulp‘); var less = require(‘gulp-less‘); var cssmin = require(‘gulp-cssmin‘); var uglify = require(‘gulp-uglify‘); var concat = require(‘gulp-concat‘); var connect = require(‘gulp-connect‘); var imagemin = require(‘gulp-imagemin‘); var open = require(‘open‘); /*把bower下載的前端框架放到我們項目當中*/ gulp.task(‘lib‘,function () { gulp.src(‘bower_components/**/*.js‘) .pipe(gulp.dest(app.buildPath+‘lib‘)) .pipe(gulp.dest(app.distPath+‘lib‘)) .pipe(connect.reload()) //當內容發生改變時， 重新加載。 }); /*2.定義任務 把所有html文件移動另一個位置*/ gulp.task(‘html‘,function () { /*要操作哪些文件 確定源文件地址*/ gulp.src(app.srcPath+‘**/*.html‘) /*src下所有目錄下的所有.html文件*/ .pipe(gulp.dest(app.buildPath)) //gulp.dest 要把文件放到指定的目標位置 .pipe(gulp.dest(app.distPath)) .pipe(connect.reload()) //當內容發生改變時， 重新加載。 }); /*3.執行任務 通過命令行。gulp 任務名稱*/ /*定義編譯less任務 下載對應的插件 gulp-less * 把less文件轉成css放到build * */ gulp.task(‘less‘,function () { gulp.src(app.srcPath+‘style/index.less‘) .pipe(less()) .pipe(gulp.dest(app.buildPath+‘css/‘)) /*經過壓縮，放到dist目錄當中*/ .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()) }); /*同時執行多個任務 [其它任務的名稱] * 當前bulid時，會自動把數組當中的所有任務給執行了。 * */ gulp.task(‘build‘,[‘less‘,‘html‘,‘js‘,‘image‘,‘lib‘]); /*定義server任務 * 搭建一個服務器。設置運行的構建目錄 * */ gulp.task(‘server‘,[‘build‘],function () { /*設置服務器*/ connect.server({ root:[app.buildPath],//要運行哪個目錄 livereload:true, //是否熱更新。 port:9999 //端口號 }) /*監聽哪些任務*/ 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‘]); //通過瀏覽器把指定的地址 （http://localhost:9999）打開。 open(‘http://localhost:9999‘); }); /*定義默認任務 * 直接執行gulp 會調用的任務 * */ gulp.task(‘default‘,[‘server‘]);
gulp的使用(二)之gulpfile.js文件的配置