gulp

gulp是什么

是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务

gulp安装：

首先我们需要安装nodejs，然后进行全局安装；安装如下：
sudo npm install gulp –g
如果想在安装的时候把gulp写进package.json文件的依赖中，则可以加上 –save-dev
sudo npm install –save-dev gulp

使用gulp;

在项目的根目录下新建一个 gulpfile.js文件，之后就可以定义一个任务了
比如如下简单的任务：代码如下：

var gulp = require('gulp');

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

    console.log('hello world');

});

创建项目必要文件比如：根目录：src

gulp API介绍

最常见的我们使用四个API，gulp.task() gulp.src() gulp.dest() gulp.watch()；

task 这个API用来创建任务，在命令行下可以输入 gulp test 来执行test的任务。
run 这个API用来运行任务
watch这个API用来监听任务。
src 这个API设置需要处理的文件的路径，可以是多个文件以数组的形式[main.scss,vender.scss]，也可以是正则表达式/*/.scss。
dest 这个API设置生成文件的路径，一个任务可以有多个生成路径，一个可以输出未压缩的版本，另一个可以输出压缩后的版本。

gulp 工具搭建步骤：

npm init 局部搭建
这里先随便填一下
"文件名字" 1. 1.0 gulp 空格空格空格 "author":作者名一路空格
gulp -v 检查安装
cnpm install gulp --save 根目录安装
gulpfile.js 新建任务js 名字不能变有关合并监听的命令全部在这里写
新建src文件夹这是文件的源码目录
cnpm install gulp-concat --save 下载js合并插件
编写js合并任务
合并js/并检查js是否合并
gulp 编写任务的名字 <--这是执行任务的方法
下载sass插件 cnpm install gulp-ruby-sass --save
gulp 编写任务的名字 <--这是执行任务的方法
检查css是否合并
安装服务器 cnpm install gulp-webserver --save
gulp 编写任务的名字
检查服务器是否运行
编写监听任务并检查是否运行
cnpm install gulp-cssmin gulp-uglify gulp-imagemin gulp-jshint --save
css压缩给js css压缩图片压缩 js语法规范
安装4个插件多个安装中间空格隔开
安装html压缩 cnpm install gulp-htmlmin --save
cnpm install jshint --save 安装插件
编写任务执行
源码执行码下面基础gulp搭建

var gulp = require('gulp');
var concat = require('gulp-concat');    // js合并
var sass = require('gulp-ruby-sass');   // sass编译
var uglify = require('gulp-uglify');    // js压缩
var jshint = require('gulp-jshint');    // js语法检测
var cssMin = require('gulp-cssmin');    // css压缩
var htmMin =require('gulp-htmlmin');    //html压缩
var imgMin = require('gulp-imagemin');    // 图片压缩
var webServer = require('gulp-webserver');  // 服务器


//js合并
gulp.task('jsTask',function () {
    gulp.src('./src/js/*.js')
        .pipe(jshint())       //第三节
        .pipe(jshint.reporter('default'))
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js'))
});



//监听sass
gulp.task('sassWatch',function () {
    gulp.watch('./src/css/**/*.scss',['sassTask'])
})
//scss
gulp.task('sassTask',function () {
    return sass('./src/css/app.scss')
        .on('error', sass.logError) //错误信息
        .pipe(gulp.dest('./dist/css'))
});
//html
gulp.task('htmlTask',function () {
    var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        minifyCSS: true//压缩页面CSS
    };
    gulp.src('./index.html')
        .pipe(htmMin(options))
        .pipe(gulp.dest('./dist'))
});

//img
gulp.task('imgTask',function () {
    gulp.src('./src/imgs/**/*')
        .pipe(imgMin())
        .pipe(gulp.dest('./dist/imgs'))
});


//监听HTML
gulp.task('watch',function () {
    gulp.watch('./index.html',['htmlTask']);  //监听HTML
    gulp.watch('./src/js/**/*.js', ['jsTask']);
    gulp.watch('./src/imgs/**', ['imgTask']);
});



//打包命令
gulp.task('default',function () {
    gulp.start('htmlTask','jsTask','sassTask','imgTask')
});

//服务器
gulp.task('webserver',['sassWatch','watch','imgTask'],function () {
    gulp.src('./dist')
        .pipe(webServer({
            host:'localhost',
            livereload: true,   //热加载 自动刷新
            posr:'2017',
            open:true
        }))
});

跑代码 cnpm install 安装本地依赖
创建过滤文件
在git 的黑框里输入 touch .gitignore
里面执行过滤文件命令

常用命令：
npm install bower -g // 全局安装bower
bower init // bower初始化配置json文件
bower install angular --save // bower安装插件默认最新 (angular#1.3指定版本)
bower uninstall angular --save // bower卸载插件

前端基于流的自动化构建工具----gulp