gulp使用 實現文件修改實時刷新

gulp例子：https://github.com/Aquarius1993/gulpDemo

淘寶鏡像：$ npm install -g cnpm --registry=https://registry.npm.taobao.org

 

一 入門：

         npm: node package manager(前提是安裝了node)

          1.1 全局安裝   npm install --global gulp

          1.2 做爲項目依賴安裝  npm install --save--dev gulp

          1.3 在項目根目錄下建立一個名爲  gulpfiel.js  的文件   

                   var gulp = require('gulp');

gulp.task('defalut',function () {

     // body... 

});  

mac用戶須要管理員的身份才能全局安裝，因此：sudo npm install gulp -g

   

二 選擇gulp組件

經過 gulp plugins，尋找對於的gulp組件

gulp-imagemin: 壓縮圖片

gulp-ruby-sass: 支持sass

gulp-less：編譯less

gulp-minify-css: 壓縮css   在minicss()中加

"compatibility": "ie7"

gulp-cssnano:壓縮css

gulp-jshint: 檢查js     
gulp-uglify: 壓縮js
gulp-concat: 合併文件
gulp-rename: 重命名文件
gulp-htmlmin: 壓縮html
gulp-clean: 清空文件夾

gulp-livereload: 服務器控制客戶端同步刷新（需配合chrome插件 LiveReload及 tiny-lr）

gulp-cssnano:壓縮css

Browser Sync 幫助咱們搭建簡單的本地服務器並能實時刷新瀏覽器 它還能  同時刷新多個設備

gulp-useref會將多個文件拼接成單一文件，並輸出到相應目錄。

安裝組件： npm install gulp-util gulp-imagemin gulp-ruby-sass gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-livereload tiny-lr --save-dev

三 項目目錄結構

project(項目名稱)
|–.git 經過git管理項目會生成這個文件夾
|–node_modules 組件目錄
|–dist 發佈環境
    |–css 樣式文件(style.css style.min.css)
    |–images 圖片文件(壓縮圖片)
    |–js js文件(main.js main.min.js)
    |–index.html 靜態文件(壓縮html)
|–src 生產環境
    |–sass sass文件
    |–images 圖片文件
    |–js js文件
    |–index.html 靜態文件
|–.jshintrc jshint配置文件

|–gulpfile.js gulp任務文件

 

四 基礎語法

gulp經過gulpfile.js文件來完成相關任務，因此項目中必須包含gulpfile.js

gulp有5個方法：src  dest task run watch

src dest:指定源文件和處理後文件的路徑

watch 用來監聽文件的變化

task 指定任務

run 執行任務

五 建立Gulp項目

     在項目文件夾下執行  npm init 

     做用是：會在項目本地創建一個package.json文件，用來保存項目的各類依賴，終端的提示均可默認。

     

建立完以後，咱們執行下面的命令：npm install gulp --save-dev（在package中添加gulp依賴）

  六 編寫gulp任務

/*
 * @Author: liheyao
 * @Date:   2016-10-25 10:56:42
 * @Last Modified by:   liheyao
 * @Last Modified time: 2016-10-25 16:15:32
 */
//引入gulp和組件
var gulp            = require('gulp'),//gulp基礎庫
	gulpLoadPlugins = require('gulp-load-plugins'),//引入依賴插件
	del             = require('del'),// 文件夾刪除清空
	// 實時刷新
	tinylr          = require('tiny-lr'),
	browerSync      = require('browser-sync'),
	server 	        = tinylr(),
	port            = 3080;
// load all gulp plugins
var plugins         = gulpLoadPlugins(), //package.json中的gulp依賴項
    env             = process.env.NODE_ENV || 'development',//開發環境  dev 仍是pro
	isProduction    = env == 'production',
	ipJS            = isProduction ? "src/js/dev.js":"src/js/pro.js";//根據不一樣的開放環境引入不一樣的js
/** css,js緩存配置 **/
var time            = new Date();
var timeStamp       = dateToString(time);
var timeStamp_prod  = time.valueOf();
function dateToString(time) {
    var year = time.getYear() + 1900;
    var month = time.getMonth() + 1;  //月  
    var day = time.getDate();         //日  
    var hh = time.getHours();       //時  
    var mm = time.getMinutes();    //分  
    var str= year + "-";
    if(month < 10){
        str += "0";     
    }
    str += month + "-";  
    if(day < 10)  
        str += "0";  
    str += day + " ";
    str += hh + ':';
    str += mm;
    return(str);   
}
//html處理
gulp.task('html',function(){
	gulp.src('src/*.html')
	// 判斷  若是是pro 壓縮html
	.pipe(plugins.if(isProduction, plugins.htmlmin({
		collapseWhitespace: true,//空白
      	removeComments: true//註釋
	})))
	// 判斷  若是是pro 加時間戳
	.pipe(plugins.if(isProduction, plugins.replace(/_VERSION_/gi, '.min_'+timeStamp_prod), plugins.replace(/_VERSION_/gi, '.min')))
	.pipe(gulp.dest('dist/'))
	// 實時監聽
	.pipe(browerSync.reload({
		stream: true
	}));
});
//sass
gulp.task('sass',function () {
	// 多個路徑用中括號
	gulp.src(['src/sass/*.scss','!src/sass/_*.scss'])
	// 編輯scss
	.pipe(plugins.sass())
	// 合併css
	.pipe(plugins.concat('index.css'))
	// 判斷  若是是pro 壓縮
	.pipe(plugins.if(isProduction,plugins.minifyCss()))
	// 判斷  若是是pro 加時間戳
	.pipe(plugins.if(isProduction,plugins.rename({suffix:'.min_'+timeStamp_prod}),plugins.rename({suffix:'.min'})))
	.pipe(gulp.dest('dist/css'))
	.pipe(browerSync.reload({
		stream: true
	}));
});
//圖片處理
gulp.task('image',function(){
	gulp.src('src/images/*.*')
	.pipe(plugins.imagemin())
	.pipe(gulp.dest('dist/images'))
	.pipe(browerSync.reload({
		stream: true
	}));
});
//js處理
gulp.task('js',function () {
	 gulp.src(['src/js/*.js',"!"+ipJS+""])
	 .pipe(plugins.babel())
	 .pipe(plugins.concat('main.js'))
	 .pipe(plugins.if(isProduction,plugins.uglify()))
	 .pipe(plugins.if(isProduction,plugins.rename({suffix:'.min_'+timeStamp_prod}),plugins.rename({suffix:'.min'})))
	 .pipe(gulp.dest('dist/js'))
	 .pipe(browerSync.reload({
	 	stream:true
	 }));
});
gulp.task('libs',function() {
	gulp.src('src/libs/**/*')
	.pipe(gulp.dest('dist/libs'))
	.pipe(browerSync.reload({
	 	stream:true
	 }));
})
//清空圖片 樣式 js
gulp.task('clean', del.bind(null, ['dist/*']));
// 實時監聽
gulp.task('serve',function(){
	browerSync({
		server:{
			baseDir:['dist']
		},
		port: port
	},function(err,bs){
		 console.log(bs.options.getIn(["urls", "local"]));
	});
	gulp.watch('src/sass/*.scss',['sass']);
	gulp.watch('src/js/*.js',['js']);
	gulp.watch('src/*.html',['html']);
	gulp.watch('src/images/*.*',['image']);
});
gulp.task('build',['clean'],function() {
	gulp.start('libs','sass','js','html','image')
})

package.json

{
  "name": "gulp",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "watch": "gulp serve",
    "dev": "cross-env gulp build",
    "build": "cross-env NODE_ENV=production gulp build"
  },
  "author": "lhy",
  "license": "ISC",
  "devDependencies": {
    "babel-preset-es2015": "^6.16.0",
    "browser-sync": "^2.17.5",
    "cross-env": "^3.1.2",
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-babel": "^6.1.2",
    "gulp-clean": "^0.3.2",
    "gulp-concat": "^2.6.0",
    "gulp-htmlmin": "^3.0.0",
    "gulp-if": "^2.0.1",
    "gulp-imagemin": "^3.0.3",
    "gulp-load-plugins": "^1.3.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-rename": "^1.2.2",
    "gulp-replace": "^0.5.4",
    "gulp-sass": "^2.3.2",
    "gulp-sourcemaps": "^2.2.0",
    "gulp-uglify": "^2.0.0",
    "rename": "^1.0.3",
    "tiny-lr": "^1.0.2"
  }
}

　　

　

 

 

 

啓動監聽的另外一種方法： http://www.dbpoo.com/getting-started-with-gulp/ 網站上提到的

http-server方式

 

 

gulp 自動化編程

 

1.命令行建立npm的配置文件

nam init

2.添加一個gulp的依賴

npm install gulp  - - save-dev

3.在項目根目錄下添加一個gulpfile.js文件 ，這個文件名是固定不變的

4.在gulpfile.js中添加任務

eg: 1.less編譯 壓縮 合併（沒有必要，通常預處理css都是導包）

2.js合併  壓縮  混淆

3.img複製

4.html壓縮

//先載入gulp的包  

var gulp =    require（‘gulp’）;

//註冊任務

//安裝 gulp-less  gulp-concat  等包

//引入gulp-less 包   轉css用的

var less = require(‘gulp-less’);

//引入gulp-cssnano包   壓縮用的

var cssnano = require(‘gulp-cssnano’);

gulp.task(‘style’,function(){

gulp.src(［’src/styles/*.less’,’!src/styles/_*.less’］)

.pipe(less())//轉css

.pipe(cssnano())//壓縮

//合併

.pipe(gulp.dest(‘dist/styles’));

});