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卸载插件
