mean开发系列工具篇之gulp

前言

本文默认你已经安装好node环境，并且熟悉node命令，和window cd命令。

gulp简介

基于nodejs流的自动化构建工具，可以快速构建项目并减少频繁的I/0操作。你可以利用gulp插件完成各种自动化任务：测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。官方中文网传送门。

gulp安装

NPM是基于命令行的node包管理工具，它可以将node的程序模块安装到项目中,
我们利用npm来安装gulp.

  • 在命令行输入：
    npm install gulp -g
  • 运行时注意查看命令行有没有错误信息，安装完成之后，利用命令查看gulp版本号是否被正确安装：
    gulp --version
    或者
    gulp -v
  • 安装到项目本地
    先CD到你的项目根目录
    npm install gulp --save-dev
    　　--save-dev保存gulp到项目依赖文件package.json的devDependencies里面。
  • 安装错误处理
    • 连不上服务器。由于npm大多包在github或者国外网站上，如果网络不好（铁通/移动长宽等），访问不了，还有可能被墙了（你懂得）。这时候你可以使用淘宝镜像：
      npm install gulp -g --registry=https://registry.npm.taobao.org
      你也可以使用淘宝的命令CNPM
      npm install -g cnpm --registry=https://registry.npm.taobao.org
      cnpm install gulp -g
      有些包可能淘宝上也没，这时候你需要翻墙了，请自备梯子。
      淘宝镜像具体教程：淘宝镜像传送门
    • 权限不够。
      wiondows请使用管理员模式打开CMD,linux下命令前面加 sudo,
      sudo npm install gulp -g
    • windows下莫名错误。
      如果网络良好，还是安装出现莫名其妙错误，那么你就应该换Git安装了。
      window平台下建议使用git安装。

gulp 使用

在你的项目根目录下创建文件gulpfile.js文件：

var gulp = require('gulp');
gulp.task('default', function() { 
     // 将你的默认的任务代码放在这
  });

运行gulp:

 $ gulp

默认的名为 default 的任务（task）将会被运行，在这里由于没有任何代码，所以这个任务并未做任何事情。
　　想要单独执行特定的任务（task），请输入 gulp <task> ，上面等价于：

   $ gulp default

gulp API简介

       gulp.src('src/js/*.js') //模糊匹配src/js文件夹下所有js文件
          .pipe( concat('app.js'))//
          .pipe(gulp.dest('pub/dist/js'));//合并后文件路径
  • gulp.dest(path[, options])
    　　能被 pipe 进来，并且将会写文件。并且重新输出所有数据，因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在，将会自动创建它。
  gulp.src('./client/templates/*.jade') 
     .pipe(jade()) 
     .pipe(gulp.dest('./build/templates'))
     .pipe(minify()) 
     .pipe(gulp.dest('./build/minified_templates'));
  • gulp.task(name[, deps], fn)
    定义一个使用 Orchestrator 实现的任务（task）。
    • name
      任务的名字，如果你需要在命令行中运行你的某些任务，那么，请不要在名字中使用空格。
    • deps
      类型： Array
      一个包含任务列表的数组，这些任务会在你当前任务运行之前完成。
      注意： 你的任务是否在这些前置依赖的任务完成之前运行了？请一定要确保你所依赖的任务列表中的任务都使用了正确的异步执行方式：使用一个 callback，或者返回一个 promise 或 stream。
    • fn
      该函数定义任务所要执行的一些操作。通常来说，它会是这种形式：
      gulp.src().pipe(someplugin())
      返回一个 stream或者promise
gulp.task('mytask', ['array', 'of', 'task', 'names'], function() { 
  return gulp.src('client/**/*.js') 
             .pipe(minify())
             .pipe(gulp.dest('build'));
});

接受一个callback

// 在 shell 中执行一个命令
var exec = require('child_process').exec;
gulp.task('jekyll', function(cb) { 
     // 编译 Jekyll 
    exec('jekyll build', function(err) { 
            if (err) return cb(err); // 返回 error 
           cb(); // 完成 task 
     }); 
});

注意： 默认的，task 将以最大的并发数执行，也就是说，gulp 会一次性运行所有的 task 并且不做任何等待。如果你想要创建一个序列化的 task 队列，并以特定的顺序执行，你需要做两件事：
给出一个提示，来告知 task 什么时候执行完毕，
并且再给出一个提示，来告知一个 task 依赖另一个 task 的完成。

var gulp = require('gulp');
// 返回一个 callback，因此系统可以知道它什么时候完成
gulp.task('one', function(cb) { 
// 做一些事 -- 异步的或者其他的 
     cb(err); // 如果 err 不是 null /undefined，则会停止执行，注意，这样代表执行失败了
});
// 定义一个所依赖的 task 必须在这个 task 执行之前完成
gulp.task('two', ['one'], function() {
 // 'one' 完成后
});
gulp.task('default', ['one', 'two']);
  • gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])
    监视文件，并且可以在文件发生改动时候做一些事情。它总会返回一个 EventEmitter 来emit change事件。
    示例：
gulp.watch('js/**/*.js', function(event) { 
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

文件变动后执行一个或者多个task的。有js文件变动，执行jshint验证任务再刷新浏览器：

gulp.watch('js/**/*.js', ['jshint']).on('change', plugins.livereload.changed);
  • gulp.src通配符匹配
    foo.js指明特定某个文件
    *.js匹配当前目录下的所有js文件,不指名扩展名则匹配所有类型
    */*.js匹配所有**第一层子文件夹**的js文件,第二层请用*/*/.js
    **/*.js匹配**所有文件夹层次**下的js文件, 包括当前目录
    ?匹配文件路径中的一个字符(不会匹配路径分隔符)
    [...]匹配方括号中出现的字符中的任意一个，当方括号中第一个字符为^或!时，则表示不匹配方括号中出现的其他字符中的任意一个.
    !匹配任何与括号中给定的任一模式都不匹配的
    下面以一系列例子来加深理解
    能匹配 a.js,x.y,abc,abc/,但不能匹配a/b.js
    .能匹配 a.js,style.css,a.b,x.y
    //    .js能匹配 a/b/c.js,x/y/z.js,不能匹配a/b.js,a/b/c/d.js
    能匹配 abc,a/b.js,a/b/c.js,x/y/z,x/y/z/a.b,能用来匹配所有的目录和文件
    /.js 能匹配 foo.js,a/foo.js,a/b/foo.js,a/b/c/foo.js
    a/    /z能匹配 a/z,a/b/z,a/b/c/z,a/d/g/h/j/k/z
    a/    b/z 能匹配 a/b/z,a/sb/z,但不能匹配a/x/sb/z,因为只有单*单独出现才能匹配多级目录
    ?.js 能匹配 a.js,b.js,c.js
    a??能匹配 a.b,abc,但不能匹配ab/,因为它不会匹配路径分隔符
    [xyz].js只能匹配 x.js,y.js,z.js,不会匹配xy.js,xyz.js等,整个中括号只代表一个字符
    [^xyz].js能匹配 a.js,b.js,c.js等,不能匹配x.js,y.js,z.js
  • 项目实例，项目结构如下
    Paste_Image.png

    'modules/*/client/css/**/*.scss' 能匹配blog,core，manage三个目录下client/css目录下任意.scss文件，不管client/css/下有几层;
    ['server.js', 'config/**/*.js', 'modules/*/server/**/*.js'] 匹配根目录下server.js,config目录下所有js文件，modules所有子目录下的server文件夹所有js文件。
    ['modules/!(core)/server/routes/**/*.js', 'modules/core/server/routes/**/*.js'],匹配module下除core之外的子目录下server/route下所有js文件。
    ['server/routes/**/*.js', '!./server/routes/app.js'] 这种是无法排除routes/app.js，因为前后匹配表达式不一直，正确应为['server/routes/**/*.js', '!server/routes/app.js']
    如果你想了解更多请参考gulp进阶传送门

gulp使用

3.1 gulp之文件合并--gulp-concat

为了减少网络请求，通常会对文件夹进行合并。

  • 安装
    　　gulp-concat插件安装和gulp安装雷同，不再赘述。
  • 基本使用
var gulp = require('gulp'),
    concat = require('gulp-concat');//引入gulp及插件gulp-concat
    gulp.task('concat', function () {//定义任务concat
       gulp.src('src/js/*.js') //模糊匹配src/js文件夹下所有js文件
          .pipe(concat('app.js'))//合并后的文件名
         .pipe(gulp.dest('pub/dist/js'));//合并后文件路径
   });
  • 执行任务
    gulp concat
  • 结果
Paste_Image.png

上图为合并压缩重命名后的文件名。下面会一一讲到。

3.2 gulp之js文件压缩gulp-uglify

为了减少文件大小，通常会对文件进行压缩处理。

  • 安装
    　　gulp-uglify插件安装和gulp安装雷同，不再赘述。
  • 基本使用
var gulp = require('gulp'),
    uglify = require('gulp-uglify');
 
   gulp.task('min', function () {
       gulp.src(['src/js/index.js','src/js/app.js']) //多个文件以数组形式或模糊匹配传入.
          .pipe(uglify({
            mangle: true,//类型：Boolean 默认：true 是否修改变量名
            compress: true//类型：Boolean 默认：true 是否完全压缩
        }))
        .pipe(gulp.dest('pub/dist/js'));//压缩后存放路劲
});

uglify具体参数查看

  • 执行任务
    gulp min
    执行成功后可以看到pub/dist/js目录下生成了新的文件

3.3 gulp之css文件压缩gulp-minify-css

  • 基本使用
var gulp = require('gulp'),
    cssmin = require('gulp-minify-css');
gulp.task('Cssmin', function () {
    gulp.src('src/css/*.css')
        .pipe(cssmin())
        .pipe(gulp.dest('dist/css'));
});
  • 配合其他插件使用
 var gulpLoadPlugins = require('gulp-load-plugins'),
       cssver = require('gulp-make-css-url-version'),
      plugins = gulpLoadPlugins();//load-plugins一次加载所有依赖的gulp插件
   gulp.task('Cssmin', function () {
      return gulp.src('modules/*/client/css/*.css')
             .pipe(cssver()) //给css文件里引用文件加版本号（文件MD5）
             .pipe(cssmin({
               advanced: false,//类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
               compatibility: 'ie7',//类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
               keepBreaks: true//类型：Boolean 默认：false [是否保留换行]
        }))
       .pipe(gulp.dest('public/dist'));
    });

插件gulp-make-css-url-version 给css文件里引用url加版本号（根据引用文件的md5生产版本号）
.class(background:url(../img/1.jpg?v=je82o9djZTYljusqe%2B3D%4B5A) no-repeat)

  • 执行任务
    gulp Cssmin

3.4 gulp之图片压缩gulp-imagemin

压缩图片文件（包括PNG、JPEG、GIF和SVG图片）

  • 基本使用
var gulp = require('gulp'),
    imagemin = require('gulp-imagemin'); 
   gulp.task('Imagemin', function () {
        gulp.src('src/img/*.{png,jpg,gif,ico}')
           .pipe(imagemin())
           .pipe(gulp.dest('dist/img'));
    });

var gulp = require('gulp'),
    imagemin = require('gulp-imagemin');
  gulp.task('Imagemin', function () {
       gulp.src('src/img/*.{png,jpg,gif,ico}')
          .pipe(imagemin({
            optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
            progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
            interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
            multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化
        }))
        .pipe(gulp.dest('public/dist'));
});
  • 由于有些图片比较大，所以可以进行深度压缩，和只压缩修改的图片，没修改就从缓存读取
var gulp = require('gulp'),
    gulpLoadPlugins = require('gulp-load-plugins'), //自动加载插件
    pngquant = require('imagemin-pngquant'),//深度压缩插件
    plugins = gulpLoadPlugins(); //实例化
  gulp.task('testImagemin', function () {
    gulp.src('src/img/*.{png,jpg,gif,ico}')
        .pipe(plugins.cache(plugins.imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox属性
            use: [pngquant()] //使用pngquant 插件深度压缩
        })))
        .pipe(gulp.dest('dist/img'));
});

3.5 自动加载插件gulp-load-plugins

上面很多例子都用到这个插件。由于我们项目中有时候会用到很多插件，如果都用require进来，我们得写很多行require代码，虽然这样没问题，但是会显得很冗长，所以gulp-load-plugins应运而生，帮我们加载这些插件。

  • 基本使用
    假定我们项目有如下插件：


    Paste_Image.png

    我们可以通过一行代码就加载进来

var gulp = require('gulp'),
plugins = require('gulp-load-plugins')();

  • gulp-load-plugins命令规则为驼峰命名，比如我们引用gulp-rename就可以plugins.rename替代，去掉gulp-前缀，再使用驼峰命名。

  • 注意： gulp-load-plugins在我们需要用到某个插件的时候，才去加载那个插件，并不是一开始就全部加载进来。因为gulp-load-plugins是依赖package.json文件来加载插件的，所以请确保你需要的插件已经加入package.json文件并已经安装完毕。

3.6 gulp之HTML文件压缩gulp-htmlmin

可以压缩页面javascript、css，去除页面空格、注释，删除多余属性等操作

  • 基本用法
var gulp = require('gulp'),
     plugins = require('gulp-load-plugins')(); //自动插件引用
     //htmlmin = require('gulp-htmlmin'); 单独引用
gulp.task('testHtmlmin', 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('src/html/*.html')
        .pipe(plugins.htmlmin(options))
        .pipe(gulp.dest('dist/html'));
});

3.7 gulp之less文件编译(gulp-less)

将less文件编译成css，当有less文件发生改变自动编译less，并保证less语法错误或出现异常时能正常工作并提示错误信息。

  • 基本使用
var gulp = require('gulp'),
    less = require('gulp-less'); 
gulp.task('less', function () {
    gulp.src('src/less/*.less')
        .pipe(less())
        .pipe(gulp.dest('src/css'));
});

一般会使用通配符自动编译less

  • 多模块编译less
var gulp = require('gulp'),
     less = require('gulp-less'),
     //本地安装gulp-minify-css [npm install gulp-minify-css --save-dev]
    cssmin = require('gulp-minify-css');
gulp.task('testLess', function () {
    gulp.src('src/less/**/*.less')
        .pipe(less())
        .pipe(cssmin()) 
         //兼容IE7及以下需设置compatibility属性 
        //.pipe(cssmin({compatibility: 'ie7'}))
        .pipe(gulp.dest('pub/css'));
});
  • 自动编译
    如果每修改一次less，就要编译一次，显然是很繁琐的，所以应当监听less改动，当有less文件发生改变时使其自动编译。配合实时重载live-reload插件轻松监听。
  • 新建less任务编译less文件
var gulp = require('gulp'),
     plugins = require('gulp-load-plugins')(); //自动插件引用
    gulp.task('less', function () {
        return gulp.src('src/less/**/*.less')
            .pipe(plugins.less()) //编译
           .pipe(plugins.rename(function (file) {
           //把编译后less文件重命名为css文件
           file.dirname = file.dirname.replace(path.sep + 'less', path.sep + 'css');
    }))
    .pipe(gulp.dest('./modules/'));//编译后存放目录
});
  • 建立监听事件
 plugins.livereload.listen(); //启动live-reload监听
gulp
.watch('src/less/**/*.less', ['sass', 'csslint'])
.on('change', plugins.livereload.changed);

官方实时重载和CSS注入实例传送门

3.8 gulp之sass文件编译(gulp-sass)

sass和less同为css预处理器，gulp处理方法也差不多

  • 用法
var gulp = require('gulp'), 
plugins = require('gulp-load-plugins')(); //自动插件引用
 gulp.task('less', function () { 
    return gulp.src('src/less/**/*.sass') 
      .pipe(plugins.sass()) //编译sass
      .pipe(plugins.rename(function (file) {
    //重命名为css
       file.dirname = file.dirname.replace(path.sep + 'scss', path.sep + 'css'); 
    }))
    .pipe(gulp.dest('./modules/'));//指定存放路径
});

3.9 gulp之js语法检查(gulp-jshint)

根据jshint规则检查语法错误，规范项目编码。详细规则请查看JHS详细规则

  • 基本使用
var gulp = require('gulp'), 
jshint = require("gulp-jshint"); 
gulp.task('jsLint', function () { 
   gulp.src('client/**/*.js')
     .pipe(jshint()) 
     .pipe(jshint.reporter()); // 输出检查结果
});
  • 项目实例
    具体规则在项目根目录的.jshintrc文件里面
var gulp = require('gulp'), 
plugins = require('gulp-load-plugins')(); //自动插件引用
gulp.task('jshint', function () {
    return gulp.src('client/**/*.js')
       .pipe(plugins.jshint())
       .pipe(plugins.jshint.reporter('default'))// 调用default输出结果
       .pipe(plugins.jshint.reporter('fail')); //调用fail输出检查错误
});

3.10 gulp之css语法检查(gulp-csslint)

根据规则检查CSS语法

  • 基本用法
var gulp = require('gulp'), 
plugins = require('gulp-load-plugins')(); 
gulp.task('csslint', function (done) {
   return gulp.src(d'client/**/*.css')
    .pipe(plugins.csslint('.csslintrc'))//加载配置文件
    .pipe(plugins.csslint.reporter())
    .pipe(plugins.csslint.reporter(function (file) {
      if (!file.csslint.errorCount) { //有错误，输出具体错误
        done();
      }
    }));
});

3.11 gulp之重命名(gulp-rename)

这个插件上面已经过了好多次了。

  • 基本用法
    同时输出一个压缩过和一个未压缩的文件
var gulp = require('gulp'),
 rename = require('gulp-rename'),
uglify = require('gulp-uglify'),
DEST = 'build/';
gulp.task('default', function() { 
   return gulp.src('foo.js') // 这会输出一个未压缩过的版本 
      .pipe(gulp.dest(DEST)) // 这会输出一个压缩过的并且重命名未 foo.min.js 的文件
     .pipe(uglify())
     .pipe(rename({ extname: '.min.js' })) 
     .pipe(gulp.dest(DEST));
});

3.12 gulp之测试gulp-mocha

mocha 是一个简单、灵活有趣的 JavaScript 测试框架，用于 Node.js 和浏览器上的 JavaScript 应用测试

  • 基本使用
var gulp = require('gulp');
var mocha = require('gulp-mocha');
gulp.task('default', function() { 
  return gulp.src(['test/test-*.js'], { read: false }) 
          .pipe(mocha({ reporter: 'spec', 
                globals: { should: require('should') }
               }));
});
  • 文件改动监听
var gulp = require('gulp');
var mocha = require('gulp-mocha');
var gutil = require('gulp-util'); //gulp工具库
gulp.task('mocha', function() {
    return gulp.src(['test/*.js'], { read: false }) 
      .pipe(mocha({ reporter: 'list' })) 
      .on('error', gutil.log);}); //记录错误
gulp.task('watch-mocha', function() { 
     gulp.watch(['lib/**', 'test/**'], ['mocha']);});

3.13 gulp之自动刷新gulp-livereload

监听到文件改动自动刷新前端页面，不需要F5。
上面好几个例子已经使用过了,下面简单介绍下。

  • 基本用法
var gulp = require('gulp'), 
     plugins = require('gulp-load-plugins')(); //自动插件引用
gulp.task('sass', function() {
     gulp.src('sass/**/*.scss') 
        .pipe(plugins.sass()) 
        .pipe(gulp.dest('css'))
        .pipe(plugins.livereload());});
gulp.task('watch', function() { 
    plugins.livereload.listen(); //要在这里调用listen()方法
    gulp.watch('sass/**/*.scss', ['sass']);
});

3.14 gulp之自动重启node程序gulp-nodemon

监听到node服务文件改动自动重启node，官方文档传送门

  • 基本用法
gulp.task('nodemon', function () {
  return plugins.nodemon({
    script: 'server.js',
    nodeArgs: ['--debug'],
    ext: 'js,html', //文件扩展名
    env: { 'NODE_ENV': 'development'，//环境-开发环境（生产环境）
    watch: ['server.js', 'config/**/*.js', 'modules/*/server/**/*.js']，
    tasks: ['jshint'] //任务
  });
});

3.15 gulp之其他插件

  • run-sequence
    让gulp任务之间可以单独执行，解除任务之间相互依赖，增强tasks复用性
  • 基本用法
  var runSequence = require('run-sequence')；
  gulp.task('default', function(done) {
     runSequence('env:dev', 'lint', ['nodemon', 'watch'], done);
   // env:dev', 'lint', 'nodemon', 'watch'均是任务
  });
  • browser-sync
    静态文件服务器，同时也支持浏览器自动刷新，和gulp-livereload功能差不多。
  • 基本使用
var gulp = require('gulp');
var browserSync = require('browser-sync');
gulp.task('browser-sync', function() { 
    browserSync({ 
        files: "**", 
          server: { 
               baseDir: "./" 
                 } 
     });
});
gulp.task('default', ["browser-sync"]);
  • 删除文件del
    你也许会想要在编译文件之前删除一些文件,del 是一个node模块，github传送门
  • 基本用法
var gulp = require('gulp');
var del = require('del');
gulp.task('clean:tmp', function (cb) {
     del([ 'dist/report.csv', 
      // 使用通配模式来匹配 `tmp` 文件夹中的所有东西
        'dist/tmp/**/*', 
// 我们不希望删掉这个文件，使用！排除
       '!dist/tmp/temp.json' 
       ], cb);
});
gulp.task('default', ['clean:tmp']);

结语

关于gulp用法以及常用插件就讲解到这里，如果错误请指正。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 158,736评论 4赞 362
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,167评论 1赞 291
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 108,442评论 0赞 243
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,902评论 0赞 204
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,302评论 3赞 287
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,573评论 1赞 216
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,847评论 2赞 312
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,562评论 0赞 197
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,260评论 1赞 241
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2赞 245
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1赞 258
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,367评论 2赞 253
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,016评论 3赞 235
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0赞 194
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2赞 274
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2赞 269

推荐阅读更多精彩内容

  • 前端构建工具gulpjs的使用介绍及技巧
    gulpjs是一个前端构建工具，与gruntjs相比，gulpjs无需写一大堆繁杂的配置参数，API也非常简单，学...
    井皮皮阅读 1,274评论 0赞 10
  • 前端构建工具gulpjs的使用介绍及技巧
    gulpjs是一个前端构建工具，与gruntjs相比，gulpjs无需写一大堆繁杂的配置参数，API也非常简单，学...
    小裁缝sun阅读 897评论 0赞 3
  • Sass&Gulp
    Sass&Gulp 一、sass介绍 (一) SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计...
    锋享前端阅读 1,466评论 0赞 3
  • gulpjs
    gulpjs是一个前端构建工具，与gruntjs相比，gulpjs无需写一大堆繁杂的配置参数，API也非常简单，学...
    build1024阅读 518评论 0赞 0
  • gulp使用以及按照方式
    1、gulp的安装 首先确保你已经正确安装了nodejs环境。然后以全局方式安装gulp： npm install...
    F_imok阅读 2,308评论 1赞 11