gulp

自动化构建工具gulp的使用

1. 安装gulp:
   使用node.js在全局环境下安装gulp，安装命令如下：

npm  install   gulp -g 

安装好之后可以通过：

gulp -v      //查看当前gulp的版本，安装成功则可以看到相应的版本，安装失败则会报错

2.使用gulp构建项目：
首先必须在项目的目录下，通过git 再次安装局部的gulp，目的是因为在项目内需要使用gulp内的相应语法。

npm install  gulp   //项目内安装gulp

同时需要手动编写一个驱动gulp启动的gulpfile.js文件：如下

'use strict'         // 使用ES5  严格模式


var  gulp=require('gulp'),//引入 gulp
	 webserver=require('gulp-webserver'),  //引入 webserver 服务器
	 sass=require('gulp-sass'),  //引入  sass 解析模块
	 minifycss=require('gulp-minify-css'), //引入  css压缩模块
	 cssimport=require('gulp-cssimport'),
	 //imagemin=require('gulp-imagemin'),   //引入 图片压缩
	 //uglify=require('gulp-uglify'),     //引入js 压缩
	 concat=require('gulp-concat'),     //引入文件合并
	 noify=require('gulp-notify'),		//引入提示信息
	 livereload=require('gulp-livereload');  //网页自动更新   (服务器控制客户端同步更新)



//使用webserver 启动一个web服务器      任务名称可以自定义·

gulp.task('webserver', function() {
  gulp.src('') //src--root dir
    .pipe(webserver({
        path: '/',
        host: '127.0.0.1',     //访问地址
        port: '9000',			//访问端口
        livereload: true,
        directoryListing: true,
        open: true
    }));
});


//检查文件
gulp.task('html',function(){              
	gulp.src('./**/*.html')
        .pipe(webserver());  //管道
});


//编译scss任务

gulp.task('sass',function(){
	 //sass()方法用于转换sass到css
    return  gulp.src('css/index.scss')    //解析的scss文件路径名  可以添加多个用逗号隔开   那么将会将多个scss文件并为一个css
           .pipe(sass()) // Converts Sass to CSS with gulp-sass
           .pipe(gulp.dest('dist/css'))  //gulp.dest输出           将scss文件传化为css之后css文件存放的位置   使用的时候直接调用main.css即可
});

//设置  运行gulp  之后会默认执行的任务
gulp.task('default',['webserver','watch','sass']);   //gulp服务一启动  自动执行的任务


// 监听文件变化
gulp.task('watch', function() {
    // 看守所有.scss档
    gulp.watch(['**/index.scss'],['sass']);   //设置监控的 指定的  scss文件，当监控的文件发生改变时，会自动运行gulp sass 命令-->从而更新到css-->页面变化
    gulp.watch(['**/*.html'], ['html']);   //设置监控所有的html文件    当监控文件发生改变时，触发 gulp html指令

});

安装完上述所gulpflie.js内require()的文件，之后直接在git中运行:

gulp

项目搭建完成!