gulp是什么？

gulp 是基于 node 實現(xiàn) Web 前端自動化開發(fā)的工具，利用它能夠極大的提高開發(fā)效率。在 Web 前端開發(fā)工作中有很多“重復工作”，比如壓縮CSS/JS文件。而這些工作都是有規(guī)律的。找到這些規(guī)律，并編寫 gulp 配置代碼,讓 gulp 自動執(zhí)行這些“重復工作”

一、安裝gulp與壓縮js文件

命令:

npm install gulp -g

npm install gulp --save-dev

初始化項目package.json的配置：npm init --yes

創(chuàng)建項目的目錄結構

 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) - 定義任務，第一個參數(shù)是任務名，第二個參數(shù)是任務內容。

gulp.src(path) - 選擇文件，傳入參數(shù)是文件路徑。

gulp.dest(path) - 輸出文件

gulp.pipe() - 管道，你可以暫時將 pipe 理解為將操作加入執(zhí)行隊列

在命令行執(zhí)行任務: gulp min-js

就會在 dist/js/lib.js 生成壓縮文件

var Oper={add:function(n,r){return n+r},sbb:function(n,r){return n-r}};

在demo2目錄下創(chuàng)建index.html，輸入以下測試代碼

 <script src="./dist/js/lib.js"></script>   <script>     alert( Oper.add( 100, 200 ) );   </script>

發(fā)現(xiàn)壓縮好的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') );});

然后在命令行執(zhí)行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文件