gulp是什么？
gulp 是基于 node 實現 Web 前端自動化開發的工具，利用它能夠極大的提高開發效率。在 Web 前端開發工作中有很多“重復工作”，比如壓縮CSS/JS文件。而這些工作都是有規律的。找到這些規律，并編寫 gulp 配置代碼,讓 gulp 自動執行這些“重復工作”
一、安裝gulp與壓縮js文件
命令:
npm install gulp -g
npm install gulp --save-dev
初始化項目package.json的配置：npm init --yes
創建項目的目錄結構
demo2 -----dist -----src -css -img -js -----gulpfile.js -----package.json
在js目錄下新建文件( lib.js )
var Oper = { add : function( n1, n2 ){ return n1 + n2; }, sbb : function( n1, n2 ){ return n1 - n2; } }安裝壓縮js的插件: npm install gulp-uglify --save-dev,
然后在gulpfile.js中，輸入任務處理代碼
var gulp = require( 'gulp' ); var uglify = require( 'gulp-uglify' ); gulp.task('min-js', function() { gulp.src('src/js/*.js') .pipe( uglify() ) .pipe( gulp.dest('dist/js') ); });gulp.task(name, fn) - 定義任務，第一個參數是任務名，第二個參數是任務內容。
gulp.src(path) - 選擇文件，傳入參數是文件路徑。
gulp.dest(path) - 輸出文件
gulp.pipe() - 管道，你可以暫時將 pipe 理解為將操作加入執行隊列
在命令行執行任務: gulp min-js
就會在 dist/js/lib.js 生成壓縮文件
var Oper={add:function(n,r){return n+r},sbb:function(n,r){return n-r}};在demo2目錄下創建index.html，輸入以下測試代碼
<script src="./dist/js/lib.js"></script> <script> alert( Oper.add( 100, 200 ) ); </script>
發現壓縮好的lib.js文件是可以正常使用的
二、壓縮css文件
安裝插件： npm install gulp-clean-css --save-dev
demo2/src/css下新建文件style.css
html,body { margin:0; padding:0;}li { list-style-type:none;}a{ text-decoration: none; color:#666;}在gulpfile.js文件中添加壓縮css的任務
var gulp = require( 'gulp' );var uglify = require( 'gulp-uglify' );var cleanCSS = require( 'gulp-clean-css' );gulp.task('min-js', function() { gulp.src('src/js/*.js') .pipe( uglify() ) .pipe( gulp.dest('dist/js') );});gulp.task('min-css', function() { gulp.src('src/css/*.css') .pipe( cleanCSS() ) .pipe( gulp.dest('dist/css') );});然后在命令行執行gulp min-css任務 就會在dist/css生成style.css壓縮文件
body,html{margin:0;padding:0}li{list-style-type:none}a{text-decoration:none;color:#666}三、編譯less文件
安裝插件：npm install gulp-less --save-dev
在src/css下面新建style.less文件
@c1 : green;@c2 : red;div { width:200px; height:200px; background:@c1; div { background:@c2; transition:all ease 1s; }}gulpfile.js中添加任務:
var gulp = require( 'gulp' );var uglify = require( 'gulp-uglify' );var cleanCSS = require( 'gulp-clean-css' );var less = require('gulp-less');gulp.task('min-js', function() { gulp.src('src/js/*.js') .pipe( uglify() ) .pipe( gulp.dest('dist/js') );});gulp.task('min-css', function() { gulp.src('src/css/*.css') .pipe( cleanCSS() ) .pipe( gulp.dest('dist/css') );});gulp.task( 'compile-less', function(){ gulp.src( 'src/css/*.less' ) .pipe( less() ) .pipe( gulp.dest( 'dist/less' ) );} );執行任務: gulp compile-less，在dist/less中生成style.css文件
div { width: 200px; height: 200px; background: green; } div div { background: red; transition: all ease 1s; }四、合并js文件
安裝插件：npm install gulp-concat --save-dev
demo2/src/js新建lib2.js文件：
function $( id ){ return document.getElementById( id ); }在gulpfile.js中新增任務:
var gulp = require( 'gulp' );var uglify = require( 'gulp-uglify' );var cleanCSS = require( 'gulp-clean-css' );var less = require('gulp-less');var concat = require('gulp-concat');gulp.task('min-js', function() { gulp.src('src/js/*.js') .pipe( uglify() ) .pipe( gulp.dest('dist/js') );});gulp.task( 'concat-file', function(){ gulp.src( 'src/js/*.js' ) .pipe( concat('all.min.js') ) .pipe( uglify() ) .pipe( gulp.dest( 'dist/js' ) );} );gulp.task('min-css', function() { gulp.src('src/css/*.css') .pipe( cleanCSS() ) .pipe( gulp.dest('dist/css') );});gulp.task( 'compile-less', function(){ gulp.src( 'src/css/*.less' ) .pipe( less() ) .pipe( gulp.dest( 'dist/less' ) );} );執行任務：gulp concat-file
在dist/js下面生成all.min.js文件
function $(n){return document.getElementById(n)}var Oper={add:function(n,t){return n+t},sbb:function(n,t){return n-t}};五、自動監測文件變化，執行任務
gulp.task( 'auto', function(){ gulp.watch( 'src/js/*.js', ['min-js'] ); gulp.watch( 'src/css/*.css', ['min-css'] ); } ); gulp.task( 'default', ['auto'] );這里添加了一個默認任務default: 執行auto任務，auto里面自動監測壓縮js和壓縮css任務
在命令行直接執行gulp.
要執行其他任務，只需要按照這幾步就可以了：
1，安裝相應的插件
2，添加相應的任務
3，執行任務
以上這篇gulp教程_從入門到項目中快速上手使用方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
