zoukankan      html  css  js  c++  java
  • gulp前端自动化构建工具使用

    (1)新建项目目录gulp_web

    (2)项目目录下建目录src里面存放需要进行gulp处理的文件目录及文件


    (3)gulpfile.js文件内容为声明需要打包应用的gulp组件及打包文件路径和打包任务,比如:

    // 引入 gulp
    var gulp = require('gulp');
    
    // 引入组件
    var jshint = require('gulp-jshint');
    var less = require('gulp-less');
    var concat = require('gulp-concat');
    var uglify = require('gulp-uglify');
    var rename = require('gulp-rename');
    
    // 检查脚本
    gulp.task('lint', function() {
        gulp.src('src/js/*.js') //该任务针对的文件
            .pipe(jshint())  //该任务调用的模块
            .pipe(jshint.reporter('default'));
    });
    
    // 编译Sass
    gulp.task('less', function() {
        gulp.src('src/less/*.less')
            .pipe(less())
            .pipe(gulp.dest('./dist/css'));
    });
    
    // 合并,压缩文件
    gulp.task('scripts', function() {
        gulp.src('src/js/*.js')
            .pipe(concat('all.js'))
            .pipe(gulp.dest('./dist'))
            .pipe(rename('all.min.js'))
            .pipe(uglify())
            .pipe(gulp.dest('./dist'));
    });
    
    // 默认任务
    gulp.task('fx_web', function(){
        gulp.run('lint', 'less', 'scripts');
    
        // 监听js文件变化
        gulp.watch('src/js/*.js', function(){
            gulp.run('lint', 'less', 'scripts');
        });
        // 监听less文件变化
        gulp.watch('src/less/*.less', function(){
            gulp.run('lint', 'less', 'scripts');
        });
    });

    (4)在安装部署nodejs环境前提下,进入cmd命令行执行到项目根目录:f:gulp_web>

    (5)f:gulp_web>npm init 一路enter键初始化打包信息,生成package.json文件,内容如:

      

    {
      "name": "gulp_web",
      "version": "1.0.0",
      "description": "",
      "main": "gulpfile.js",
      "scripts": {
        "test": "echo "Error: no test specified" && exit 1"
      },
      "author": "",
      "license": "ISC"
    }

    (6)f:gulp_web>npm install --save-dev gulp 执行安装gulp组件,结果会在项目根目录生成node_modules目录。

    注意gulp的安装包括全局安装和项目目录安装:

    在系统管理员cmd默认路径下全局安装请输入
    npm install -g gulp 在项目目录安装请输入 npm install --save-dev gulp


    (7)根据上面gulpfile.js文件中所应用的声明组件:

    // 引入组件
    var jshint = require('gulp-jshint');
    var less = require('gulp-less');
    var concat = require('gulp-concat');
    var uglify = require('gulp-uglify');
    var rename = require('gulp-rename');

    按需安装组件,如下:
    npm install --save-dev jshint gulp-jshint

    npm install --save-dev less gulp-less

    npm install --save-dev concat gulp-concat

    npm install --save-dev uglify gulp-uglify

    npm install --save-dev rename gulp-rename

    (8)以上组件全部安装完成后,f:gulp_web>gulp fx_web 执行打包任务,在gulpfile.jf文件中声明:

    // 默认任务
    gulp.task('fx_web', function(){
        gulp.run('lint', 'less', 'scripts');
    
        // 监听js文件变化
        gulp.watch('src/js/*.js', function(){
            gulp.run('lint', 'less', 'scripts');
        });
        // 监听less文件变化
        gulp.watch('src/less/*.less', function(){
            gulp.run('lint', 'less', 'scripts');
        });
    });

    (9)如果上面任务执行顺利,会出现如下画面,并在根目录生成目录dist存放gulp处理过后的文件及目录。


    最后gulp自动化构建成功。

    下面摘录其他网友的gulp组件说明:

    必备插件

    gulp-htmlmin 看到名字就能知道,这个插件是用来压缩 HTML。PS:注释啥的都可以去掉哦,看文档get更多技能哈
    gulp-imagemin 除了能压缩常见的图片格式,还能压缩 SVG,叼叼的~
    gulp-clean-css 压缩 CSS。我原本推荐的是 gulp-minify-css,结果其首页中已建议改用gulp-clean-css...
    gulp-uglify 专业压缩 Javascript
    gulp-concat 上面几个都是压缩,这插件是管合并的...恭喜,“减少网络请求”的成就达成:)
    gulp-autoprefixer 给 CSS 增加前缀。解决某些CSS属性不是标准属性,有各种浏览器前缀的情况,灰常有用
    gulp-rename 修改文件名称。比如有时我们需要把app.js改成app.min.js,瞬间高级了
    gulp-util 最基础的工具,但俺只用来打日志...

    常用插件

    run-sequence gulp 的 task 都是并行(异步)执行,如果遇见需要串行的场景,那么这个插件就是必备了。偶的使用场景是:处理(压缩、合并等等) CSS/JS、再gulp-rev、再上传 CDN;然后使用 CDN的地址替换 HTML 中的 CSS/JS 地址,再压缩 HTML。那么替换 HTML 这步须在之前的工作处理完后再执行。 ** 最后要说,gulp4.0发布后,不需要RS也可以搞定串行任务了 **
    del / gulp-clean 删除。俺的使用场景是:JS/CSS 文件都会在压缩后使用gulp-rev,即文件名被hash,然后再上传到 CDN,最后俺再使用 删除插件 把本地压缩后的文件删除掉,不用多余保存。
    gulp-rev 把静态文件名改成hash的形式。
    gulp-rev-replace 配合 gulp-rev 使用,拿到生成的 manifest。json 后替换对应的文件名称。
    gulp-rev-collector 到线上环境前,我会用来配合gulp-rev使用,替换 HTML 中的路径
    gulp-rev-append 给页面引用的静态文件增加hash后缀,避免被浏览器缓存...当然,如果是使用 CDN,这个套路就不行了
    gulp-connect / gulp-livereload LiveReload 的俩款插件都值得拥有,不过都各稍有学习成本,看看文档就明白鸟
    gulp-sourcemaps 处理 JavaScript 时生成 SourceMap;如果你不了解 SourceMap,可以看看这篇阮一峰大神的《Source Map 详解》
    gulp-load-plugins 帮忙偷懒用的,可以帮我们加载插件,不用require或者import...当然,俺个人感觉用了这个插件后,阅读gulpfile.js的可读性差了,鱼和熊掌不可兼得:(
    gulp-jshint JavaScript 代码校验
    gulp-sass / gulp-less 写 CSS 的同学都懂哈

    进阶插件

    babel JS 语法新特性用起来。这个插件可以让我们用新的 标准/特性/提案 写 JavaScript 代码,然后再向下 转换编译,最终生成随处可用的 JavaScript 代码。更通俗的说话就是:可以用新的规范写代码,经过 babel 编译后生成没有兼容问题的代码。
    gulp-flatten 移动指定文件,不想压缩或者合并的时候,直接用这个插件把对应文件移动到指定文件夹。俺偶尔在内部项目会偷懒用上,图方便:)
    gulp-coffee CoffeeScript 值得去了解
    gulp-markdown-pdf 把 Markdown 编译为 PDF
    gulp-markdown 写手的福音,可以把 Markdown 转成 HTML
    gulp-html2md 把 HTML 编译为 Markdown
    gulp-tinypng 超屌的图片压缩工具,使用 Tinypng 引擎。PS:因为 Tinypng 免费帐号有月限制,所以使用使需注意。
    sprity 生成雪碧图。稍有点学习成本,仔细阅读文档即可。
    gulp-if 可以在 pipe 里面写点逻辑了,屌不屌。举例:比如处理 ./pub/*.js,如果文件名称是 xxx.js,那么不处理;更可以用来区分当前是开发环境还是生产环境。
    gulp-file-include 俺搞内部项目的时候会用到,让 HTML 组件化的第一小步
    gulp-git 直接在 Build 时把代码都提交到 git上了...特么劳资懒起来连我自己都害怕
    gulp-qiniu 用于把指定文件上传至七牛的指定路径下(PS:首先,你得有自己的七牛账号和空间)
    gulp-notify 在控制台中加入文字描述,build 的时候更高级有木有。当然,当需要的时候把错误信息也展示出来会很有帮助。更高级的功能就需要你查看其文档了~
    gulp-plumber gulp 的错误处理有点坑,假如发生错误进程就挂了。相对的解决办法不少,但是这个是我个人比较推荐的,比特么在容易出错的地方写错误监听靠谱。所以这个插件可以阻止 gulp 插件发生错误导致进程退出并输出错误日志。

  • 相关阅读:
    Python元组、列表、字典
    测试通过Word直接发布博文
    Python环境搭建(windows)
    hdu 4003 Find Metal Mineral 树形DP
    poj 1986 Distance Queries LCA
    poj 1470 Closest Common Ancestors LCA
    poj 1330 Nearest Common Ancestors LCA
    hdu 3046 Pleasant sheep and big big wolf 最小割
    poj 3281 Dining 最大流
    zoj 2760 How Many Shortest Path 最大流
  • 原文地址:https://www.cnblogs.com/fx2008/p/6053999.html
Copyright © 2011-2022 走看看