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’));

});