zoukankan      html  css  js  c++  java
  • npm与gulp的使用

    这边将工作中使用的npm以及gulp的一些方法做了整理,方便以后查阅,至少不用去麻烦度娘了~

    A.npm的使用:

      1.在你所需要的文件夹里面初始化npm-->  npm init -y    --->会生成一个package.json文件

      2.根据需要下载相应的文件-->   npm install jquery --save  或者  npm install jquery --save-dev   --->这两种做法都会在package.json文件里面生成一个当前文件的版本号,并且该指令还会生成一个node_modules文件夹,下载的文件放在文件夹中

    B.gulp的使用:

      1.将上述A中生成的package.json文件拷贝到当前文件夹下面,为的是下载package.json里面的文件

      2.安装gulp,通过npm来安装 --->  npm install gulp-cli -g --->(g指的是全局的)

      3.在当前项目中安装gulp --->  npm install gulp --save

      4.在当前项目中新建一个文件 ---> gulpfile.js --->在这个文件里面写gulp指令

    此时就可以使用了,在使用之间先将gulp里面的一些方法列举出来:1--> gulp.task("任务名称",function(){}); -->使用时: 在git里面敲上:gulp 任务名称

                                   2--> gulp.src(['文件路径1','文件路径2']); -->当有多个路径时要用数组的形式传递参数

                                   3--> gulp.dest('文件路径'); -->指定最终处理之后的文件的存放路径

                                   4--> gulp.watch(); -->自动监视文件的变化,然后执行相应的任务

      5.在执行前要下载相应的文件:1-- 对多个文件进行合并 -->npm install gulp-concat --save

                    2-- 对js文件进行压缩 -->npm install gulp-uglify --save

                    3-- 对css文件进行压缩 -->npm install gulp-cssnano --save

                    4-- 对html文件进行压缩 -->npm install gulp-htmlmin --save

      6.举个栗子:

        在该文件夹下有个js文件夹,里面有a.js 和 b.js,现在要将这两个合并且压缩到test文件夹下面的js文件夹中,即js/a.js,b.js ----> test/js/test.js

        过程:

         在git里面的操作:

          npm install gulp-concat --save

          npm install gulp-uglify --save

         在gulpfile.js里面的操作:

          var concat = require('gulp-concat')

          var uglify = require('guulp-uglify') 

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

            gulp.src(['./js/a.js','./js/b.js'])-->合并之前的文件名称

            .pipe(concat('test.js'))-->这边是合并之后的文件名称

            .pipe(uglify())

            .pipe(gulp.dest('test/js'))

          })

        在git里面的操作:

          gulp script -->相当于执行上面的操作

      下图相当于它的一个执行过程的比喻

  • 相关阅读:
    springboot(七):springboot+mybatis多数据源最简解决方案
    springboot(六):如何优雅的使用mybatis
    springboot(五):spring data jpa的使用
    springboot(四):thymeleaf使用详解
    springboot(三):Spring boot中Redis的使用
    springboot(二):web综合开发
    springboot(一):入门篇
    常用十六进制颜色对照表代码查询
    burpsuit之Repeater、Sequencer、Decoder、Comparer模块
    burpsuit之Spider、Scanner、Intruder模块
  • 原文地址:https://www.cnblogs.com/199316xu/p/6518284.html
Copyright © 2011-2022 走看看