gulp学习

Browserify

1. 使用方法

   • 首先用angular.js来写3个controller在写函数的时候过于繁琐，可以将几个controller分为几个功能，分别写在各自的js文件中，在index.js之前引入几个js文件。
   • 在各自的js文件的功能函数赋给一个全局变量，就会被别人覆盖，所以用module.exports来引入，在index.js文件中用requrie来引入。
   • 利用browserify 【各自文件的位置】-o(被导入的文件) main.js
   • 这样，就可以只在html文件里面只导入Main.js。
2. 利用shell构建
   
   • 首先添加build.sh脚本将browserify js/index.js -o main.js写入，在命令行chom + x build.sh;rm main.js;再执行build.sh，就会直接生成main.js文件

gulp基本用法

1. 首先新建文件夹，并在这个文件夹安装gulp，然后建立gulpfile.js。

2. 在里面require gulp,并且定义默认事件。

   var gulp = require('gulp');
   // Gulp的默认事件
   gulp.task('default', function(){
       console.log("我最棒！");
   });

   

3. 利用shelljs来使得gulp执行browserify的命令使得几个js文件合并。

   var gulp = require('gulp');
   var shelljs = require('shelljs');
   // Gulp的默认事件
   gulp.task('default', function(){
   // console.log("我最棒！");
   shelljs.exec('browserfy js/main.js -o main.js');
   });

   执行gulp就会自动加上Main.js

4. 直接引入browserify来进行合并

   var gulp = require('gulp');
   // var shelljs = require('shelljs');
   var browserify = require('browserify');
   var fs = require('fs');
   // Gulp的默认事件
   gulp.task('default', function(){
       // console.log("我最棒！");
       // shelljs.exec('browserfy js/main.js -o main.js');
       browserify.add('js/index.js').bundle().pipe('fs.createWriteStream('js/main.js')');
   });

5. 自动化构建：利用gulp-watch来监控js代码的变动，再利用run-sequence来直接调用自己写的其他task

   var gulp = require('gulp');
   // var shelljs = require('shelljs');
   var browserify = require('browserify');
   var fs = require('fs');
   var sequence = require('run-sequence');
   // Gulp的默认事件
   gulp.task('default', function() {
       // 运行mainjs功能
       sequence('mainjs', 'watch');
       // console.log("我最棒！");
       // shelljs.exec('browserfy js/main.js -o main.js');
       // browserify.add('js/index.js').bundle().pipe('fs.createWriteStream('js/main.js')');
   });
   // 将功能独立起来
   gulp.task('mainjs', function() {
       browserify.add('js/index.js').bundle().pipe('fs.createWriteStream('js/main.js')');
   });
   // 利用gulp-watch来监控Js的代码是否变动问题
   // 这样，就可以在改变js代码的时候就会自动执行mainjs
   gulp.task('watch', function() {
       gulp.watch('[assests/js/*.js]', function() {
           sequence('mainjs');
       });
   });
   

6. 利用插件watchify来进行检测

   var gulp = require('gulp');
   // var shelljs = require('shelljs');
   var browserify = require('browserify');
   var fs = require('fs');
   var sequence = require('run-sequence');
   
   var watchify = require('watchify');
   // Gulp的默认事件
   gulp.task('default', function() {
       // 运行mainjs功能
       sequence('mainjs');
       // console.log("我最棒！");
       // shelljs.exec('browserfy js/main.js -o main.js');
       // browserify.add('js/index.js').bundle().pipe('fs.createWriteStream('js/main.js')');
   });
   // 将功能独立起来
   gulp.task('mainjs', function() {
       //将它打包起来
       var b = browserify({
           //设定入口文件
           entries: '[assests/js/index.js]',
           cache: {},
           packageCache: {},
           //加入插件
           plugin: [watchify]
       });
       b.bundle().pipe('fs.createWriteStream('js/main.js')');
       //进行事件检测更新
       b.on('update', function() {
           b.bundle().pipe('fs.createWriteStream('js/main.js')');
       });
   });
   
   
   // 利用gulp-watch来监控Js的代码是否变动问题
   // 这样，就可以在改变js代码的时候就会自动执行mainjs
   // gulp.task('watch', function() {
   //  gulp.watch('[assests/js/*.js]', function() {
   //      sequence('mainjs');
   //  });
   // });
   

7. 利用browserify-shim来压缩第三方类库
   

   • 将文件夹进行Init生成json文件，并将一下加入
     

8. 将js uglyfy消掉空格
   

9. 用gulp-if来判断什么时候用uglyfy
   

css的构建

1. 利用gulp-clean-css来压缩
   

2. 利用gulp-concat来进行合并
   

   img 压缩

   利用gulp-imageMin来进行压缩

gulp.task('image',function(){
    gulp.src('images/*.*')
        .pipe(imageMin({progressive: true}))
        .pipe(gulp.dest('dist/images'))
})

首尾公用

https://www.cnblogs.com/woodk/p/5613280.html