Glup疾速入门整顿

Gulp引见

• 中文主页: http://www.gulpjs.com.cn/

• gulp是与grunt功用相似的前端项目构建东西, 也是基于Nodejs的自动使命运转器

• 能自动化地完成 Javascript/coffee/sass/less/html/image/css 等文件的
  兼并、紧缩、搜检、监听文件变化、阅读器自动革新、测试等使命

• gulp更高效(异步多使命), 更易于运用, 插件高质量

装置 nodejs, 检察版本: node -v

建立一个简朴的运用gulp_test

|- dist
|- src
|- js
|- css
|- less
|- index.html
|- gulpfile.js-----gulp设置文件
|- package.json
{
"name": "gulp_test",
"version": "1.0.0"
}

装置gulp:

• 全局装置gulp

  npm install gulp -g

• 部分装置gulp

  npm install gulp --save-dev

• 设置编码: gulpfile.js

  //引入gulp模块
var gulp = require('gulp');
//定义默许使命
gulp.task('使命名', function() {
// 将你的使命的使命代码放在这
});
gulp.task('default', ['使命'])//异步实行

• 构建敕令:

  gulp

运用gulp插件

• 相干插件:

  • gulp-concat : 兼并文件(js/css)

  • gulp-uglify : 紧缩js文件

  • gulp-rename : 文件重命名

  • gulp-less : 编译less

  • gulp-clean-css : 紧缩css

  • gulp-livereload : 及时自动编译革新

• 主要API

  • gulp.src(filePath/pathArr) :

    • 指向指定途径的一切文件, 返回文件流对象

    • 用于读取文件

  • gulp.dest(dirPath/pathArr)

    • 指向指定的一切文件夹

    • 用于向文件夹中输出文件

  • gulp.task(name, [deps], fn)

    • 定义一个使命

  • gulp.watch()

    • 看管文件的变化

• 处置惩罚js

  • 建立js文件

    • src/js/test1.js

      (function () {
function add(num1, num2) {
var num3 = 0;
num1 = num2 + num3;
return num1 + num2;
}
console.log(add(10, 30));
})();

    • src/js/test2.js

      (function () {
var arr = [2,3,4].map(function (item, index) {
return item+1;
});
console.log(arr);
})();

  • 下载插件:

    npm install gulp-concat gulp-uglify gulp-rename --save-dev

  • 设置编码

    var cOncat= require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
gulp.task('minifyjs', function() {
return gulp.src('src/js/*.js') //操纵的源文件
.pipe(concat('built.js')) //兼并到临时文件
.pipe(gulp.dest('dist/js')) //天生到目的文件夹
.pipe(rename({suffix: '.min'})) //重命名
.pipe(uglify()) //紧缩
.pipe(gulp.dest('dist/js'));
});
gulp.task('default', ['minifyjs']);

  • 页面引入js阅读测试 : index.html

  • 打包测试: gulp

• 处置惩罚css

  • 建立less/css文件

    • src/css/test1.css

      #div1 {
width: 100px;
height: 100px;
background: green;
}

    • src/css/test2.css

      #div2 {
width: 200px;
height: 200px;
background: blue;
}

    • src/less/test3.less

      @base: yellow;
.index1 { color: @base; }
.index2 { color: green; }

  • 下载插件:

    npm install gulp-less gulp-clean-css --save-dev

  • 设置编码

    var less = require('gulp-less');
var cleanCSS = require('gulp-clean-css');
//less处置惩罚使命
gulp.task('lessTask', function () {
return gulp.src('src/less/*.less')
.pipe(less())
.pipe(gulp.dest('src/css'));
})
//css处置惩罚使命, 指定依靠的使命
gulp.task('cssTask',['lessTask'], function () {
return gulp.src('src/css/*.css')
.pipe(concat('built.css'))
.pipe(gulp.dest('dist/css'))
.pipe(rename({suffix: '.min'}))
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(gulp.dest('dist/css'));
});
gulp.task('default', ['minifyjs', 'cssTask']);

  • 页面引入css阅读测试 : index.html

    


    div1111111
    
    
    div2222222

  • 打包测试: gulp

• 处置惩罚html

  • 下载插件:

    npm install gulp-htmlmin --save-dev

  • 设置编码

    var htmlmin = require('gulp-htmlmin');
//紧缩html使命
gulp.task('htmlMinify', function() {
return gulp.src('index.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest('dist'));
});
gulp.task('default', ['minifyjs', 'cssTask', 'htmlMinify']);

  • 修正页面引入

    


  • 打包测试: gulp

• 自动编译

  • 下载插件

    npm install gulp-livereload --save-dev

  • 设置编码:

    var livereload = require('gulp-livereload');

//一切的pipe
.pipe(livereload());
gulp.task('watch', ['default'], function () {
//开启看管
livereload.listen();
//看管指定的文件, 并指定对应的处置惩罚使命
gulp.watch('src/js/*.js', ['minifyjs'])
gulp.watch(['src/css/*.css','src/less/*.less'], ['cssTask','lessTask']);
});

  • 热加载(及时加载)

    • 下载插件：gulp-connect

      1、 npm install gulp-connect --save-dev
2、 注册 热加载的使命 server，注重依靠build使命
3、注册热加载的使命
//设置加载的选项
connect.server({
root : 'dist/',//看管的源目的文件途径
livereload : true,//是不是及时革新
port : 5000//开启端口号
});
// 自动开启链接
open('http://localhost:5000');//npm install open --save-dev
// 看管目的文件
gulp.watch('src/js/*.js', ['js']);
gulp.watch(['src/css/*.css', 'src/css/*.less'], ['cssMin', 'less']);

  • 扩大

    • 打包加载gulp插件

    • 条件：将插件下载好。

    • 下载打包插件： gulp-load-plugins

    • npm install gulp-load-plugins &＃8211;save-dev

    • 引入： var $ = require(&＃8216;gulp-load-plugins&＃8217;)();！！！引入的插件是个要领，必需记着挪用。

    • 神来之笔：其他的插件不必再引入了

    • 运用要领：

      * 一切的插件用 $ 引出，其他插件的要领名一致为插件的功用名字(即插件名字的末了一部分)：如：concat,connect,cssmin...
gulp.task('less', function () {
return gulp.src('src/less/*.less')
.pipe($.less())//将less转换为less
.pipe(gulp.dest('src/css/'))//将转换为less的文件输出到src下
.pipe($.livereload())//及时革新
.pipe($.connect.reload())
});