小小千想和您聊一聊

当前位置: 首页> 技术分享> npm + gulp + scss + 项目架构

npm + gulp + scss + 项目架构

  一、npm讲解

  https://www.npmjs.com.cn/

  NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:

  允许用户从NPM服务器下载别人编写的第三方包到本地使用。

  允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。

  允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

  由于nodejs已经集成了npm,所以npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。

  node -v

  npm -v

  由于npm的服务器在国外,国内为了保证访问速度,我们可以访问淘宝镜像,以后就可以通过cnpm代替npm指令了

  http://npm.taobao.org/

  Npm install -g cnpm --registry=https://registry.npm.taobao.org

  安装模块

npm install <Module Name> --global             ------ 全局安装
    //简写为 npm i <Module Name> -g          ---     一定要小写                     
npm install <Module Name> ------ 临时安装
    // 简写为 npm i <Module Name>
npm install <Module Name> --save                ------ 项目依赖
    // 简写为 npm i<Module Name> -S        ---     一定要大写
npm install <Module Name> --save-dev            ------ 开发依赖
    // 简写为 npm i <Module Name> -D          ---     一定要大写

  升级模块、更新模块

Npm install <Module Name>@version --global             ------ 全局安装
    //简写为 npm i <Module Name>@version -g          ---     一定要小写                     
npm install <Module Name>@version------ 临时安装
    // 简写为 npm i <Module Name>@version
npm install <Module Name>@version --save                ------ 项目依赖
    // 简写为 npm i<Module Name>@version -S        ---     一定要大写
npm install <Module Name>@version --save-dev            ------ 开发依赖
    // 简写为 npm i <Module Name>@version -D          ---     一定要大写

  删除模块

npm uninstall <Module Name> -g
npm uninstall <Module Name> -S 
npm uninstall <Module Name> -D 

  二、gulp

  gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。

  gulp是基于Nodejs的自动任务运行器,她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。在实现上,她借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。

  gulp 和 grunt 非常类似,但相比于 grunt 的频繁 IO 操作,gulp 的流操作,能更快地更便捷地完成构建工作。

  全局安装gulp

  cnpm i gulp -g

  查看是否正确安装:命令提示符执行gulp -v,出现版本号即为正确安装,目前最新版本为3.9.1

  gulp -v

  在项目目录处按住shift,点击鼠标右键,选择打开命令行,通过cnpm init创建package.json文件,一直敲回车即可

  cnpm init

// 以下为输出内容
name: (gulp-lesson)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to E:\course-wxx\sz1805\lesson2\gulp-lesson\package.json:

{
  "name": "gulp-lesson",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
Is this ok? (yes)

  打开package.json文件,可以看到如下内容

{
  "name": "gulp-lesson",   // 项目名称
  "version": "1.0.0",            // 项目版本号
  "description": "",            // 项目描述
  "main": "index.js",         // 默认入口文件
  "scripts": {                     // 测试命令,可以通过npm run test运行后续的指令,可以配置,后续会讲解
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",                // 作者
  "license": "ISC"            //  模块制定协议,让用户知道他们有何权限来使用你的模块,以及使用该模块有哪些限制
}

  三、在该项目目录下创建一个js文件,gulpfile.js

  四、安装基础模块

  cnpm i gulp -S

  此时会发现项目文件夹中package.json内容发生了改变

{
  "name": "gulp-lesson",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": { // 开发依赖
    "gulp": "^3.9.1"
  }
}

  五、配置项目基本目录结构

|-gulp-lesson
    |-assets               -------   静态资源文件
        |-css                  -------   第三方css文件
        |-images               -------   项目图片文件
        |-js                   -------   第三方js文件
    |-js                   -------   自己的js文件
    |-lib                  -------   scss框架文件
        base.scss          -------   全局base定义,可以使用在任何地方
        classes.scss       -------   scss函数的定义
        function.scss      -------   自定义全局函数
        reset.scss         ------    重置mobile及高级浏览器上常见的异常
        variables.scss     ------    全局variables,基础变量map
    |-node_modules         -------   模块依赖文件
    |-scss                 -------   自己的scss文件
    |-views                -------   项目结构文件
        cart.html           -------   购物车页面 -----  全选、反选、选择计算总价、总数量,数量加减
        category.html       -------   分类页面   -----  各种排序筛选
        detail.html         -------   详情页面   -----  吸顶效果、放大效果、详情介绍,加购物画车
        index.html          -------   首页       -----  菜单,楼梯效果,轮播图
        login.html          -------   登录页面   -----  必须表单验证,后天可用php验证
        order.html          -------   订单页面   -----  地址的填写、支付方式选择、确认表单
        pay.html            -------   支付页面   -----  假的二维码,支付按钮,模态框输金额,点支付
        register.html       -------   注册页面   -----  必须表单验证,后天可用php验证
        usercenter.html     -------   个人中心   -----  修改密码,地址管理,订单管理
    gulpfile.json           -------   gulp项目配置文件   
    package.json            -------   项目基础配置文件

  六、编写gulpfile.js文件,实现将views,assets文件复制到dist文件夹下,注意dist文件我们并未创建

var gulp = require('gulp')
gulp.task('copy-views', function () {
    gulp.src('views/**/*')                    // 选中views文件夹下的所有文件包括子文件中的
        .pipe(                                        // 管道思想,上一级的输出作为下一级的输入
            gulp.dest('dist/views')          // 将上诉命令的结果放置dist文件夹中,没有dist文件夹会自动创建
        )
})
gulp.task('copy-assets', function () {
    gulp.src('assets/**/*')                     // 选中views文件夹下的所有文件包括子文件中的
        .pipe(                                         // 管道思想,上一级的输出作为下一级的输入
            gulp.dest('dist/assets')         // 将上诉命令的结果放置dist文件夹中,没有dist文件夹会自动创建
        )
})

  此时在该项目目录下运行如下命令

  gulp copy-views

[23:02:51] Using gulpfile E:\course-wxx\sz1805\lesson2\gulp-lesson\gulpfile.js
[23:02:51] Starting 'copy-views'...
[23:02:51] Finished 'copy-views' after 5.82 ms

  gulp copy-assets

[23:03:20] Using gulpfile E:\course-wxx\sz1805\lesson2\gulp-lesson\gulpfile.js
[23:03:20] Starting 'copy-assets'...
[23:03:20] Finished 'copy-assets' after 5.7 ms

  我们就会发现在项目下出现了一个dist的文件夹,下面有两个文件夹,分别为assets和views,结构如下:

|-dist
    |-assets              
            |-css                
            |-images              
            |-js     
        |-views
            cart.html           
            category.html       
            detail.html        
            index.html          
            login.html         
            order.html          
            pay.html            
            register.html       
            usercenter.html     

  那么我们能不能一次性执行完上面的两个指令呢?

  答案必然是可以的

  我们可以修改gulpfile.js文件如下

var gulp = require('gulp')
gulp.task('copy-views', function () {
    gulp.src('views/**/*')
        .pipe(
            gulp.dest('dist/views')
        )
})
gulp.task('copy-assets', function () {
    gulp.src('assets/**/*')
        .pipe(
            gulp.dest('dist/assets')
        )
})
//build是gulp中自带的,是默认的,你不需要更改名字
gulp.task('build', ['copy-views', 'copy-assets'], function () {
    console.log('ok')
})

  然后只需要执行以下命令即可,可以先删除dist文件夹然后再试查看效果,

  gulp build

[23:18:28] Using gulpfile E:\course-wxx\sz1805\lesson2\gulp-lesson\gulpfile.js
[23:18:28] Starting 'copy-views'...
[23:18:28] Finished 'copy-views' after 5.76 ms
[23:18:28] Starting 'copy-assets'...
[23:18:28] Finished 'copy-assets' after 712 μs
[23:18:28] Starting 'build'...
ok
[23:18:28] Finished 'build' after 100 μs

  我们发现dist文件夹又神奇的出现了

  接下来我们接入css预处理方式之sass/scss,这样我们就可以使用scss来编写css了

  七、sass/scss模块使用

  cnpm i node-sass gulp-sass -S

  打开index.html文件,编写如下代码,注意我们不在dist文件夹下编辑任何文件

<body>
    <div class="container"></div>
</body>

  在scss文件夹下创建common.scss文件,作为项目的通用样式文件,写入如下代码

@import './../lib/reset.scss';
.container {
    @include rect(90%, 1000px);
    @include margin(0 auto);
    @include background-color(#eee);
}

  安装压缩css模块和更改名字模块

  cnpm i gulp-clean-css gulp-rename -S

  现在编辑gulpfile.js文件,并且添加scss任务到默认列表组中

var gulp = require('gulp')
var sass = require('gulp-sass')
var cleanCss = require('gulp-clean-css')
var rename = require('gulp-rename')
gulp.task('copy-views', function () {
    gulp.src('views/**/*')
        .pipe(
            gulp.dest('dist/views')
        )
})
gulp.task('copy-assets', function () {
    gulp.src('assets/**/*')
        .pipe(
            gulp.dest('dist/assets')
        )
})
gulp.task('scss', function () {
    gulp.src('scss/**/*.scss')                            // 找到scss文件夹下的所有的scss文件
        .pipe(sass().on('error',sass.logError))   // 会将scss文件处理为css文件
        .pipe(rename((path) => {                   // 将css后缀名改为css文件
            path.extname = '.css'
        }))
        .pipe(gulp.dest('dist/css'))                 // 将css文件放在dist目录下
        .pipe(cleanCss())                               // 将css文件下的css文件进行压缩处理
        .pipe(rename((path) => {                // 将dist/css后缀名改为**.min.css文件
            path.extname = '.min.css'
        }))
        .pipe(gulp.dest('dist/css'))             // 将**.min.css问价放在dist文件中
})
gulp.task('build', ['copy-views', 'copy-assets','scss'], function () {
    console.log('ok')
})

  此时执行如下命令,则可看到dist文件中出现了变化

  gulp build

[23:41:52] Using gulpfile E:\course-wxx\sz1805\lesson2\gulp-lesson\gulpfile.js
[23:41:52] Starting 'copy-views'...
[23:41:52] Finished 'copy-views' after 5.25 ms
[23:41:52] Starting 'copy-assets'...
[23:41:52] Finished 'copy-assets' after 574 μs
[23:41:52] Starting 'scss'...
[23:41:52] Finished 'scss' after 3.08 ms
[23:41:52] Starting 'build'...
ok
[23:41:52] Finished 'build' after 84 μs

|-dist
    |-assets
    |-css
        common.css        // 未压缩的css代码-----含注释语句
        common.min.css    // 压缩过的css代码-----不含注释语句    
    |-views

  如果我们做的是PC端的页面,也许我们得注意一下,在lib/base.scss文件中第14行代码必须得是normal,如果在移动端需要根据屏幕宽度变化而实时变化的时候,我们可以更改为scaling

14 |       responsive-type:        normal   ------   宽高确定不会变,如果为scaling高度会随着宽度变化而变化

  如果我们的文件内容发生改变后(修改完一个文件),我们不可能实时运行gulp build重新构建出一个新的版本,所以我们需要监听文件的变化从而让它自动更新。

  八、监听文件的变化

  不仅监听文件变化,并且执行命令只想写gulp命令,需要配置默认任务default

  修改gulpfile.js文件如下

var gulp = require('gulp')
var sass = require('gulp-sass')
var cleanCss = require('gulp-clean-css')
var rename = require('gulp-rename')
gulp.task('copy-views', function () {
    gulp.src('views/**/*')
        .pipe(
            gulp.dest('dist/views')
        )
})
gulp.task('copy-assets', function () {
    gulp.src('assets/**/*')
        .pipe(
            gulp.dest('dist/assets')
        )
})
gulp.task('scss', function () {
    gulp.src('scss/**/*.scss')                         
        .pipe(sass().on('error',sass.logError))  
        .pipe(rename((path) => {                   
            path.extname = '.css'
        }))
        .pipe(gulp.dest('dist/css'))                 
        .pipe(cleanCss())                               
        .pipe(rename((path) => {                
            path.extname = '.min.css'
        }))
        .pipe(gulp.dest('dist/css'))             
})
gulp.task('watch', function () {
    gulp.watch('views/**/*', ['copy-views'])     //如果监听到views文件夹内有内容发生变化,触发copy-views任务
    gulp.watch('assets/**/*', ['copy-assets'])  //如果监听到assets文件夹内有内容发生变化,触发copy- assets任务
    gulp.watch('scss/**/*.scss', ['scss'])            //如果监听到scss文件夹内有内容发生变化,触发scss任务
})
gulp.task('build', ['copy-views', 'copy-assets','scss'], function () {
    console.log('ok')
})
gulp.task('default', ['build', 'watch']);  //默认执行build任务和watch任务

  此时执行gulp指令即可,会自动执行监听任务

  gulp

[23:56:23] Using gulpfile E:\course-wxx\sz1805\lesson2\gulp-lesson\gulpfile.js
[23:56:23] Starting 'copy-views'...
[23:56:23] Finished 'copy-views' after 5.57 ms
[23:56:23] Starting 'copy-assets'...
[23:56:23] Finished 'copy-assets' after 633 μs
[23:56:23] Starting 'scss'...
[23:56:23] Finished 'scss' after 4.2 ms
[23:56:23] Starting 'build'...
ok
[23:56:23] Finished 'build' after 94 μs
[23:56:23] Starting 'watch'...
[23:56:23] Finished 'watch' after 19 ms
[23:56:23] Starting 'default'...
[23:56:23] Finished 'default' after 44 μs
-     // 闪动表示继续监听任务的变化

  随意修改文件内部内容(添加文件,修改文件)即可发现dist文件夹中相对应的都发生了改变,比如我们修改了views文件夹下的index.html

<div class="container">这里是页面</div>

  则会发现在dist/views/index.html的内容也发生了改变

  上面我们进行了样式,布局的改变,接下来我们设置一下js的改变

  九、js文件的改变以及压缩

  安装压缩js的模块

  cnpm i gulp-uglify -S

  在js文件夹创建 一个公共js文件common.js,编写如下内容

  alert('千锋吴大勋')

  alert('帅,很帅,非常帅')

  修改gulpfile.js文件如下

var gulp = require('gulp')
var sass = require('gulp-sass')
var cleanCss = require('gulp-clean-css')
var rename = require('gulp-rename')
var uglify = require('gulp-uglify')
gulp.task('copy-views', function () {
    gulp.src('views/**/*')
        .pipe(
            gulp.dest('dist/views')
        )
})
gulp.task('copy-assets', function () {
    gulp.src('assets/**/*')
        .pipe(
            gulp.dest('dist/assets')
        )
})
gulp.task('scss', function () {
    gulp.src('scss/**/*.scss')                         
        .pipe(sass().on('error',sass.logError))  
        .pipe(rename((path) => {                   
            path.extname = '.css'
        }))
        .pipe(gulp.dest('dist/css'))                 
        .pipe(cleanCss())                               
        .pipe(rename((path) => {                
            path.extname = '.min.css'
        }))
        .pipe(gulp.dest('dist/css'))             
})
gulp.task('js', function () {
    gulp.src('js/**/*.js')                                // 找到js文件夹下的所有的js文件
        .pipe(rename((path) => {                  // 更改js文件夹下的所有的js文件名字
            path.extname = '.js'
        }))
        .pipe(                                                  // 放到dist/js中
            gulp.dest('dist/js')
        )
        .pipe(uglify())                                    // 压缩js代码
        .pipe(rename((path) => {                 // 更改dist/js文件夹下的所有的js文件名字为*.min.js     
            path.extname = '.min.js'
        }))
        .pipe(                                                 // 放到dist/js中    
            gulp.dest('dist/js')
        )
})
gulp.task('watch', function () {
    gulp.watch('views/**/*', ['copy-views'])
    gulp.watch('assets/**/*', ['copy-assets'])
    gulp.watch('scss/**/*.scss', ['scss'])
    gulp.watch('js/**/*.js', ['js'])
})
gulp.task('build', ['copy-views', 'copy-assets', 'scss', 'js'], function () {
    console.log('ok')
})
gulp.task('default', ['build', 'watch']);

  然后运行gulp指令,随意修改assets、views、js、scss文件夹下的内容,均可发现dist文件中的内容发生了改变

  上面的一些操作主要是文件的复制与内容的替换,我们要想查看实时效果的话还得需要引入服务器

  十、服务器的架设

  安装模块gulp-connect

  cnpm i gulp-connect -S

  一定要记住每次修改完文件也要重新启动服务器,

  具体修改文件gulpfile.js配置如下

var gulp = require('gulp')
var sass = require('gulp-sass')
var cleanCss = require('gulp-clean-css')
var rename = require('gulp-rename')
var uglify = require('gulp-uglify')
var connect = require('gulp-connect')
gulp.task('copy-views', function () {
    gulp.src('views/**/*')
        .pipe(
            gulp.dest('dist/views')
        )
        .pipe(connect.reload())        // 重新启动服务器
})
gulp.task('copy-assets', function () {
    gulp.src('assets/**/*')
        .pipe(
            gulp.dest('dist/assets')
        )
        .pipe(connect.reload())       // 重新启动服务器
})
gulp.task('scss', function () {
    gulp.src('scss/**/*.scss')                         
        .pipe(sass().on('error',sass.logError))  
        .pipe(rename((path) => {                   
            path.extname = '.css'
        }))
        .pipe(gulp.dest('dist/css'))                 
        .pipe(cleanCss())                               
        .pipe(rename((path) => {                
            path.extname = '.min.css'
        }))
        .pipe(gulp.dest('dist/css'))
        .pipe(connect.reload())       // 重新启动服务器
})
gulp.task('js', function () {
    gulp.src('js/**/*.js')
        .pipe(rename((path) => {                   
            path.extname = '.js'
        }))
        .pipe(
            gulp.dest('dist/js')
        )
        .pipe(uglify())
        .pipe(rename((path) => {                   
            path.extname = '.min.js'
        }))
        .pipe(
            gulp.dest('dist/js')
        )
        .pipe(connect.reload())       // 重新启动服务器
})
gulp.task('watch', function () {
    gulp.watch('views/**/*', ['copy-views'])
    gulp.watch('assets/**/*', ['copy-assets'])
    gulp.watch('scss/**/*.scss', ['scss'])
    gulp.watch('js/**/*.js', ['js'])
})
gulp.task('server', function () {          // 默认服务任务server
    connect.server({
        root: 'dist/views',                       //启动目录
        livereload: true                           //实时更新数据,需要调用connect.reload()
    })
})
gulp.task('build', ['copy-views', 'copy-assets', 'scss', 'js'], function () {
    console.log('ok')
})
gulp.task('default', ['build', 'watch', 'server']);

  我们都知道,项目中有一个版块最耗费资源,那就是图片,所以我们需要对图片进行压缩

  十一、压缩图片

  安装模块 gulp-imagemin

  cnpm i gulp-imagemin -S

  修改gulpfile.js文件如下

var gulp = require('gulp')
var sass = require('gulp-sass')
var cleanCss = require('gulp-clean-css')
var rename = require('gulp-rename')
var uglify = require('gulp-uglify')
var connect = require('gulp-connect')
var imageMin = require('gulp-imagemin');
gulp.task('copy-views', function () {
    gulp.src('views/**/*')
        .pipe(
            gulp.dest('dist/views')
        )
        .pipe(connect.reload())
})
gulp.task('copy-assets', function () {
    gulp.src('assets/**/*')
        .pipe(
            gulp.dest('dist/assets')
        )
        .pipe(connect.reload())
})
gulp.task('scss', function () {
    gulp.src('scss/**/*.scss')                         
        .pipe(sass().on('error',sass.logError))  
        .pipe(rename((path) => {                   
            path.extname = '.css'
        }))
        .pipe(gulp.dest('dist/css'))                 
        .pipe(cleanCss())                               
        .pipe(rename((path) => {                
            path.extname = '.min.css'
        }))
        .pipe(gulp.dest('dist/css'))
        .pipe(connect.reload())
})
gulp.task('js', function () {
    gulp.src('js/**/*.js')
        .pipe(rename((path) => {                   
            path.extname = '.js'
        }))
        .pipe(
            gulp.dest('dist/js')
        )
        .pipe(uglify())
        .pipe(rename((path) => {                   
            path.extname = '.min.js'
        }))
        .pipe(
            gulp.dest('dist/js')
        )
        .pipe(connect.reload())
})
gulp.task('image',function(){
    gulp.src('assets/images/**/*')
        .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('dist/assets/images'))
})
gulp.task('watch', function () {
    gulp.watch('views/**/*', ['copy-views'])
    gulp.watch('assets/**/*', ['copy-assets'])
    gulp.watch('scss/**/*.scss', ['scss'])
    gulp.watch('js/**/*.js', ['js'])
    gulp.watch('assets/images/**/*', ['image'])
})
gulp.task('server', function () {
    connect.server({
        root: 'dist/views',
        livereload: true
    })
})
gulp.task('build', ['copy-views', 'copy-assets', 'scss', 'js','image'], function () {
    console.log('ok')
})
gulp.task('default', ['build', 'watch', 'server']);

  可以添加一张图片,执行指令gulp

  gulp

[00:38:31] Using gulpfile E:\course-wxx\sz1805\lesson2\gulp-lesson\gulpfile.js
[00:38:31] Starting 'copy-views'...
[00:38:31] Finished 'copy-views' after 5.63 ms
[00:38:31] Starting 'copy-assets'...
[00:38:31] Finished 'copy-assets' after 773 μs
[00:38:31] Starting 'scss'...
[00:38:31] Finished 'scss' after 2.94 ms
[00:38:31] Starting 'js'...
[00:38:31] Finished 'js' after 1.06 ms
[00:38:31] Starting 'image'...
[00:38:31] Finished 'image' after 1.23 ms
[00:38:31] Starting 'build'...
ok
[00:38:31] Finished 'build' after 317 μs
[00:38:31] Starting 'watch'...
[00:38:31] Finished 'watch' after 22 ms
[00:38:31] Starting 'server'...
[00:38:31] Starting server...
[00:38:31] Finished 'server' after 4.29 ms
[00:38:31] Starting 'default'...
[00:38:31] Finished 'default' after 30 μs
[00:38:31] Server started http://localhost:8080
[00:38:31] LiveReload started on port 35729
[00:38:31] Running server
[00:38:32] gulp-imagemin: Minified 1 image (saved 3.7 kB - 9.7%)

  至此我们已经把项目中需要的东西搞的差不多了,现在唯一不足的一点就是,我们前端中要尽量的减少http请求数,我们写完项目的时候会有好多的css文件,好多的js文件,我们有必要合并一下

  十二、合并文件

  安装模块gulp-concat

  cnpm i gulp-concat -S

  此处必须说明的是,大家在合并的时候一定要注意一下合并文件的顺序,否则会出现顺序错乱的情况,此处不做说明,只写简要代码,大家可以根据需求实现此功能

  简易代码如下

var concat = require('gulp-concat')
gulp.task('contactcss', function () {
    gulp.src(['1.css', '2.css', '3.css', '!4.css']) // 合并1,2,3.css,不包括4.css
        .pipe(concat('app.css'))
        .pipe(gulp.dest('dist/css'))
})
gulp.task('contactjs', function () {
    gulp.src(['1.js', '2.js', '3.js', '!4.js']) // 合并1,2,3.js,不包括4.js
        .pipe(concat('app.js'))
        .pipe(gulp.dest('dist/js'))
})

  总结,本章节中我们学习了如何使用gulp来构建一个项目,希望对大家有所帮助。

上一篇:npm、cnpm与yarn

下一篇:前端 javascript 练习题-拖拽及九宫格

QQ技术交流群

千锋HTML5官方②群
857920838

加入群聊

用户登录

手机号:

密码:

图形验证码:

点击切换

用户注册

手机号:

登录密码:

图形验证码:

点击切换

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

手机号:

图形验证码:

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

新密码:

确认新密码:

获取课程

添加小千老师微信,获取课程信息

如何获取课程?

一、需拥有此本教材

如没有,可点击下方入口购买当当购买入口京东购买入口

二、添加小千老师,发送拥有凭证,解锁课程资源

1.购买该教材的订单信息
2.拥有的实体书信息等

更换手机号

新手机号:

图形验证码:

短信验证码:

获取验证码