zoukankan html css js c++ java

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

三项目目录结构

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

});

查看全文

相关阅读:
传球游戏（NOIP2008 普及组第三题）
立体图（NOIP2008 普及组第四题）
多项式输出（NOIP2009 普及组第一题）
分数线划定（NOIP2009 普及组第二题）
第5到8章
 第四章总结
 实验九
 实验五
 实验四
 实验三

原文地址：https://www.cnblogs.com/lhy-93/p/5741664.html

gulp使用 实现文件修改实时刷新

gulp使用实现文件修改实时刷新