正文

angularjs开发app之准备工作3_gulp

Christeen  2022-02-09  708

关键词：

写在前面的话：

　　常见的自动构建工具有 grunt、gulp、webpack，把源码进行合并压缩，节省带宽等~

一起来学习 gulp 的使用吧~

三、gulp的使用( gulp 中文网)：

　　gulp 的优点：基于流、任务化

　　常用API: src 、dest 、watch 、task 、pipe

（1）安装 gulp：

　　　　npm install -g gulp

（2）再在 webapp文件夹下安装一些 nodejs 模块：

　　　　npm init

　　之后webapp中就会出现一个package.json文件，以及一个 node_modules 文件夹

（3）继续安装一些依赖插件：

　　　　npm install --save-dev gulp

　　一个一个装太麻烦了，可用批量安装的方式（之间用空格分开）：

　　　　npm install --save-dev gulp-clean gulp-concat gulp-connect gulp-cssmin gulp-imagemin gulp-less gulp-load-plugins gulp-uglify open

　　安装完了之后 package.json文件的内容如下图，可以看到已安装的依赖（10个）的版本信息：

　（4）配置文件夹，首先要对需要的文件目录预先做一下设计，参考如下：　

　　　目录结构设计：
　　　　　build 用于调试
　　　　　dist 用于发布使用
　　　　　src:
　　　　　　　data (用于mock数据)
　　　　　　　image
　　　　　　　script：config,controller,directive,filter,service
　　　　　　　app.js
　　　　　　　style:
　　　　　　　view: 各种html文件
　　　　　　　index.html
　　　　　　　404.html

　　编写任务　　　

　　　　lib
　　　　html
　　　　json
　　　　css
　　　　js
　　　　image
　　　　clean
　　　　reload
　　　　watch

　开始编写任务吧，所以按照任务名称，下面有九步~

　做法：

　　　　1）在webapp文件下新建一个文件gulpfile.js，内容如下：

 1 var gulp = require('gulp');
 2 var $ = require('gulp-load-plugins')();
 3 var open = require('open');
 4 
 5 var app = {
 6     srcPath: 'src/',
 7     devPath: 'build/',
 8     prdPath: 'dist/'
 9 };
10 
11 gulp.task('lib', function(){
12     gulp.src('bower_components/**/*')
13     .pipe(gulp.dest(app.devPath + 'vendor'))
14     .pipe(gulp.dest(app.prdPath + 'vendor'))
15 });

　　　　　保存后，运行如下命令：

　　　　　　gulp lib

　　　　　执行成功后，webapp 文件夹下出现了 build 、dist 两个文件夹，且都包含了 vendor 文件夹。

　　　　2）在webapp文件下新建一个文件夹 src, 并在gulpfile.js文件新增如下代码：

gulp.task('html', function(){
    gulp.src(app.srcPath + '**/*.html')
    .pipe(gulp.dest(app.devPath))
    .pipe(gulp.dest(app.prdPath))
});

　　　　写完了之后可以测试一下：在src中新建一个名为view的文件夹，在view中新建一个1.html文档(内容为空都没有关系)，然后运行

　　　　　　gulp html

　　　　执行成功后，webapp 文件夹下的 build 、dist 两个文件夹中，且都包含了 view 文件夹，证明配置成功啦~

　　　　3）在gulpfile.js文件新增如下代码：

gulp.task('json', function(){
    gulp.src(app.srcPath + 'data/**/*.json')
    .pipe(gulp.dest(app.devPath + 'data'))
    .pipe(gulp.dest(app.prdPath + 'data'))
});

　　　　写完了之后可以测试一下：在src中新建一个名为data的文件夹，在data中新建一个1.json文档(内容为空都没有关系)，然后运行

　　　　　　gulp json

　　　　执行成功后，webapp 文件夹下的 build 、dist 两个文件夹中，且都包含了 data 文件夹，证明配置成功啦~

　　　4）在gulpfile.js文件新增如下代码：

gulp.task('less', function(){
    gulp.src(app.srcPath + 'style/index.less')
    .pipe($.less())
    .pipe(gulp.dest(app.devPath + 'css'))
    .pipe($.cssmin())
    .pipe(gulp.dest(app.prdPath + 'css'))
});

　　　　写完了之后可以测试一下：在src中新建一个名为 style 的文件夹，在 style 中新建一个1.less文档以及一个 index.less文档 (内容为空都没有关系)，然后运行

　　　　　　gulp less

　　　　执行成功后，webapp 文件夹下的 build 、dist 两个文件夹中，且都包含了 css 文件夹及index.css，证明配置成功啦~

注：此处使用index.less作为一个总的引用，在其中使用@import将其他所有的.less文件都引入过来。

　　　　5）在gulpfile.js文件新增如下代码：

gulp.task('js', function(){
    gulp.src(app.srcPath + 'script/**/*.js')
    .pipe($.concat('index.js'))
    .pipe(gulp.dest(app.devPath + 'js'))
    .pipe($.uglify())
    .pipe(gulp.dest(app.prdPath + 'js'))
});

　　　　写完了之后可以测试一下：在src中新建一个名为 script 的文件夹，在 script 中新建一个1.js文档以及一个 2.js文档 (内容为空都没有关系)，然后运行

　　　　　　gulp js

　　　　执行成功后，webapp 文件夹下的 build 、dist 两个文件夹中，且都包含了 js 文件夹及index.js，证明配置成功啦~

注：此处使用index.js作为一个总的引用。

　　　　6）在gulpfile.js文件新增如下代码：

gulp.task('image', function(){
    gulp.src(app.srcPath + 'image/**/*')
    .pipe(gulp.dest(app.devPath + 'image'))
    .pipe($.imagemin())
    .pipe(gulp.dest(app.prdPath + 'image'))
});

　　　　写完了之后可以测试一下：在src中新建一个名为 image 的文件夹，在 image 中加入一个1.png，然后运行

　　　　　　gulp image

　　　　执行成功后，webapp 文件夹下的 build 、dist 两个文件夹中，且都包含了 image 文件夹及1.png，且图片被压缩得更小了，原来是72.6k, build中是72.6k, dist中是63.4k。证明配置成功啦~

　　　　7）在gulpfile.js文件新增如下代码：

gulp.task('clean', function(){
    gulp.src([app.devPath, app.prdPath])
    .pipe($.clean())
});

　　　　写完了之后运行

　　　　　　　gulp clean

　　　　执行成功后，webapp 文件夹下的 build 、dist 两个文件夹都消失了。证明配置成功啦~

　　至此，9个里面已经有7个配置完啦！可以透露一下小技巧了，执行一个命令，将所有需要编译拷贝的文件一下全搞定~只要在gulpfile.js文件新增如下代码：

gulp.task('build',['image', 'js', 'less', 'lib', 'html', 'json']);

　　　　运行：

　　　　　　gulp build

　　　　然后之前被删掉的都回来啦~开发时这样用就比较方便啦，不用运行那么多次了。同时，还可设置构建时自动打开浏览器，并指定监控端口为1234，只要在gulpfile.js文件新增如下代码：

gulp.task('serve',['build'], function(){
    $.connect.server({
        root: [app.devPath],
        livereload: true,
        port: 1234
    });
    open('http://localhost:1234');
    gulp.watch('bower_components/**/*',['lib']);
    gulp.watch(app.srcPath + '**/*.html', ['html']);
    gulp.watch(app.srcPath + 'data/**/*.json', ['json']);
    gulp.watch(app.srcPath + 'style/**/*.less', ['less']);
    gulp.watch(app.srcPath + 'image/**/*', ['image']);
    gulp.watch(app.srcPath + 'script/**/*.js', ['js']);
});

　　　　运行：gulp serve

当然这样是不能够实现刷新的，还需要进行下一步reload才可。

8）在gulpfile.js文件新增如下代码：

　　在1~6步的后面都要加上 reload()，也就是下面的一句话：

　　　　.pipe($.connect.reload());

　　实例：只列举一个~

这样的话，每次运行 gulp serve时都能自动更新了，

还有一个方法，可以实现只输入 gulp 即可运行，方法如下，在gulpfile.js文件新增如下代码：

gulp.task('default', ['serve']);  //加了这一句之后，直接运行gulp后面不加什么，就可以直接serve

来试一下：

　　gulp

额，浏览器自动打开！并呈现出 index.html中的内容。

　注意：index.html是写在src路径下的。

ok 啦~

至此，本文结束~

ionic+angularjs开发之『个人日常管理』app

准备工作资源预装工具安装bower1npm install -gbower 安装ngCordova1bower install ngCordova （*由于网络获取资源的原因，后面几次建项目后都无法下载到，自己便复制了原来的ngCordova目录（到YourProjectwwwwlib目录下），... 查看详情

ionic+angularjs开发之『个人日常管理』app

前端笔试题之什么是gulp

...这样说道：Gulp是基于node.js的一个前端自动化构建工具，开发这可以使用它构建自动化工作流程（前端集成开发环境）。使用gulp你可以简化工作量，让你把重点放在功能的开发上，从而提高你的开发效率和工作质量。例... 查看详情

webui实践之使用angularjs进行独立开发(模拟后台)

条件与目标：前端使用AngularJS，接口服务均使用$http访问。与后台协商好接口，完全独立并行开发，不用等待后台开发完接口才能进行页面测试。需要gulp打包系统参与，即打包之前可以模拟后台接口测试，而打包之后则为Release... 查看详情

gulp构建前端自动化工作流之：常用插件介绍及使用

...一个初步的了解之后，我们开始构建一个较为完整的Gulp开发环境。本文主要分为6个段落：1.构建项目目录结构（DirectoryStructureBuild）2.插件介绍及使用方法（Tasksanddependencies）3.扩展优化（Extend&OptimizeTask）4.其他插件介绍（Other... 查看详情

angularjs入门之表单开发

本文和大家分享的主要是前端开发中必备的AngularJs框架表单开发相关基础知识，希望对大家使用和学习AngularJs有所帮助。 1.简单的表单提交； 2.更多的表单元素； 3.初始化表单；代码 <!doctype html><htm... 查看详情

ionic+angularjs开发之『个人日常管理』app

写在前面的话过去一年自己接触了不少手机前端开发，得益于现在手机性能的提升和4G普及，感觉使用混合技术开发手机App已经可以满足越来越多的应用场景了。新年伊始，对自己2016年所学知识做一个阶段性总结，记录一个自制... 查看详情

ionic+angularjs开发之『个人日常管理』app

angularjs+bootstrap搭载前台框架——准备工作

1.关于什么是AngularJS以及什么是bootstrap我就不多说了，简单说下，angularjs是一个比较强大前台MVC框架，bootstrap是Twitter推出的一个用于前端开发的开源工具包，可以迅速搭建web前台，可以去官网看看（AngularJs：http://angularjs.org/ ... 查看详情

angularjs+bootstrap搭载前台框架——准备工作

1.关于什么是AngularJs以及什么是bootstrap我就不多说了，简单说下，AngularJs是一个比较强大前台MVC框架，bootstrap是Twitter推出的一个用于前端开发的开源工具包，可以迅速搭建web前台，可以去官网看看（AngularJs：http://angularjs.org/ ... 查看详情

笔记之_java的angularjs整理

Angularjs隐藏域不能取值Responseentity两种传递json的方式，在MVC中Usestrict严格模式是javascript检查重复键、为申明变量、重复参数Js不在服务器编译，el表达式要在服务器编译：后为方法1、AngularJS通过ng-directives(ng-指令)扩展了HTML。ng-ap... 查看详情

企业做一个商城app需要哪些准备工作

【问题补充】商城app开发公司诚智科技通过调查得出一组数据：20%左右的企业已经拥有或者正在开发自己的app商城软件，60%左右的公司已经把开发app软件列入近期公司发展项目中。大部分实体连锁公司都有想法把自己的网站制作... 查看详情

app开发流程之通用宏定义及头文件

...式实现各种炫酷的功能和UI前，做好准备工作是提高后续开发效率的必经之路。所以，这个系列，我不是在各种堆技术，更关注的是“兵马动”之前的“粮草行”，有些繁琐，但当清晰理出整个脉络，后续的工作只是... 查看详情

跨平台应用开发进阶(二十二)：uni-appandroidapp上线准备工作汇总(代码片段)

文章目录一、为什么要做安全加固？二、如何为App应用加固？三、APP签名3.1使用说明3.2V1、V2、V3、V4签名方案3.2.1v1签名3.2.2v2签名3.2.3v2签名相对v1签名的优点3.2.4v3签名3.2.5v4签名3.2.6总结3.3jarsigner与apksigner3.3.1jarsigner3.3.2apksi... 查看详情

gulp的使用之gulpfile.js文件的配置

Gulpfile.js是什么文件:gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编... 查看详情

驱动学学之驱动学习的准备工作

1：驱动开发的准备工作(1)正常运行linux系统的开发板。要求开发板中的linux的zImage必须是自己编译的，不能是别人编译的。(2)内核源码树，其实就是一个经过了配置编译之后的内核源码。这里使用的是九鼎官方提供的kener，因为... 查看详情

前端开发自动化之gulp

前端开发自动化之gulp　　在这里我们将用gulp来实现前端开发自动化,考虑到我们永远屹立的万里长城我们使用cnpm,同时本文内容以本人另一篇文章(http://www.cnblogs.com/izgl/p/6433105.html)为前提,请自行参考　　在工程目录下打开cmd ... 查看详情