gulp-concat多个css变成一个css

.pipe(concat(main.css))

模块gulp-clean-css

gulp.task('minfy-css',function(){
    gulp.src(['assets.css/bootstrap-themen.css', 'assets/css/bootstrap.css','assets/css/index.css'])

.pipe(cleanCss())

.pipe(gulp.dest('/css'))

})

* npm i gulp

* 新建gulpfile.js

var gulp=require('gulp')

gulp.task('default',function(){console.log('this is default task')})

* 执行gulp

// this is default task

xxx.sh脚本文件直接放入命令如：browserify ./index.js -o main.js

执行.sh   ./xxx.sh 即可生成main.js

gulp 任务管理器

browserify

* 避免全局污染，使用commonJs模块规范

module.exports =xxx

* npm i browserify -g

require（模块）如图：

模块定义使用model.exports

Js模块化加载

cssminifier.com

www.cleancss.com/css-beautify

npm install gulp-clean-css

browserify commonJs

笔记笔记笔记

https://sass-lang.com

gulp-coffee

将 coffee 文件编译成 js 文件

gulp-if

browerify-shim

Makes CommonJS incompatible files browserifyable.

将第三方非 commonJS 规范文件可应用 browserify.

https://github.com/thlorenz/browserify-shim

自动化的关键调用gulp.watch

在gulp的task中调用有的task，需要借助run-sequence，npm install --save-dev run-sequence
然后
var runSequence = require('run-sequence');

var gulp = require('gulp');

var browserify = require('browserify');

var sequence = require('run-sequence');

var watchify = require('watchify');

var fs = require('fs');

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

    sequence('mainjs');

})

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

    var b = browserify({

        entries: ['assets/index.js'],

        cache: {},

        packageCache: {},

        plugin: [watchify]

    });

    var bundle = function(argument) {

        b.bundle().pipe(fs.createWriteStream('main.js'));

    }

    bundle();

    b.on('update', bundle);

})

路径和老师有点不一样

var gulp = require('gulp');
var browserify = require('browserify');
var sequence = require('run-sequence');
var fs = require('fs');
gulp.task('default', function() {
    sequence('mainjs', 'watch');
})
gulp.task('mainjs', function() {
    browserify().add('assets/index.js').bundle()
    .pipe(fs.createWriteStream('main.js'));
})
gulp.task('watch', function() {
    gulp.watch(['assets/*.js'], function() {
         sequence('mainjs');    
    })
})

Gulp

1. 安装

   $ npm install --global gulp-cli # 全局安装 gulp
   $ npm install --save-dev gulp # 作为项目的开发依赖（devDependencies）安装

2. 创建 gulp 任务管理文件 : gulpfile.js (在此文件中定义gulp所要执行的所有任务)

3. 任何需要 gulp 做的事情都需要被定义在任务中, 定义任务的 gulp api: gulp.task(), 在调用此 api 之前, 在 gulpfile.js 中先引用 gulp

   var gulp = require('gulp');

4. 通过gulp.task()定义任务, gulp中默认任务default, 定义默认任务

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

5. 任务定义完成后, 在命令行执行gulp

   $ gulp

6. 通过 gulp 指定命令行实现打包

   Node 中执行脚本

   var gulp = require('gulp');var shelljs = require('shelljs');
   gulp.task('default', function() {
       shelljs.exec('browserify index.js -o main.js');
   })

• 安装shelljs npm install shelljs

• 执行 shelljs.exec('browserify index.js -o main.js');

在 Gulp 中执行 browserify 的 Api 实现打包

项目目录下安装 browserify 

$ npm install browserify

var gulp = require('gulp');
var browserify = require('browserify');
var fs = require('fs');
gulp.task('default', function() {
    browserify().add('index.js').bundle().pipe(fs.createWriteStream('main.js'));
})

require 方法引入厂商JS文件

安装browserify 三步

step1: 安装homebrew(官网有介绍)

step2: brew install node

step3: npm install -g browserify

英文不好，学的有点慢

什么是Browserify？

管理前段依赖的工具

可以实现js 的模块化加载

Gulp--基于流的自动化构建工具。使用了流就可以像管道一样，将一个步骤的处理结果直接输送到下一个步骤，一切数据都保存在内存之中，从而减少I/O，提高了构建工具的性能。

browerify是一个前端自动构建工具