:一个用来移除文件和目录的任务 grunt-contrib-jshint:一个审查代码质量的任务 grunt-contrib-concat:一个连接多文件在一个文件中的任务 grunt-contrib-uglify...:一个压缩和缩小文件尺寸的任务 grunt-contrib-watch:一个检测文件活动的任务 准备项目 首先，创建信的空的Web应用程序添加示例的Typescript文件，Typescript文件在.../lib/combined.min.js' } }, 最后，调用grunt.loadNpmTasks()让上文定义的所有任务在Visual Studio中执行 保存文件，最终文件内容如下所示...监测文件变化 Watch任务可以监视文件和目录的变化，并且在监测到变化后触发一系列任务，在initConfig方法中添加以下的代码来监视Typescript目录下的所有js文件的变化，并执行’all“任务...方法调用让任务显示在Task Runner Explorer中 grunt.loadNpmTasks('grunt-contrib-watch'); 运行Watch任务，命令行窗体将处在等待状态，此时它监视着文件的变化
在使用 Grunt 之前，项目静态文件几乎没进行压缩合并便直接放到线上，部分文件手动复制粘贴到某压缩网站进行压缩。...", "grunt-contrib-uglify": "^0.10.0", "grunt-contrib-watch": "^0.6.1" } 我先通过 watch 监控静态文件，一旦文件有改动并保存...配置高的电脑还行，配置低的电脑就悲剧了，至少我试过每次一保存文件都要等待个两三秒钟后合并压缩完成才能去刷新浏览器。一旦静态文件多起来，那这等待的时候只会增多不会减少。...这一次不再使用 php 进行 include 静态文件，而是在 html 里面进行 include。然后主要将 Grunt 用于两个大的方向，一个是用于开发期间，一个用于上线前期打包。.../ └─ src/ ├─ css/ ├─ images/ ├─ js/ ├─ sass/ └─ view/ 在开发期间，使用到的 Grunt 插件如下，watch
实际上，安装的并不是 Grunt，而是 Grunt-cli，也就是命令行的 Grunt，这样你就可以使用 grunt 命令来执行某个项目中的 Gruntfile.js 中定义的 task 。...grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect 等待一大串乱七八糟的下载状态，我们把...grunt 和相关插件都安装好了，不信看下是不是多了一个 node_modules 文件夹？...也就是说，在 Uglify 插件下面，有一个 build 任务，内容是把 XX.js 压缩输出到 xx.min.js 里面。如果你需要更多压缩任务，也可以参照 build 多写几个任务。...我们把刚生成的 global.js 文件删掉，在命令行执行 grunt compressjs 任务，结果 jshint 报错了： 未完待续····
Grunt不使用数据流，而是使用文件，对文件执行单个任务然后保存到新的文件中，每个任务都会重复执行所有进程，文件系统频繁的处理任务会导致Grunt的运行速度比Gulp慢。...假设要定义一个任务build来执行css、js、imgs这三个任务，我们可以通过指定一个任务数组而不是函数来完成。...gulp.task('build', ['css', 'js', 'imgs']); 这些任务不是同时进行的，所以你不能认为在js任务开始的时候css任务已经结束了，也可能还没有结束。...}); 现在，当改变一个模板文件时，build任务会被执行并生成HTML文件，也可以给watch函数一个回调函数，而不是一个任务数组。...例如，在执行一系列任务和调用一个函数时，你就可以在返回的watcher中添加监听change事件: var watcher = gulp.watch('templates/*.tmpl.html', [
文件访问， 需要Gruntfile.js文件，这是一个入口文件，grunt将从这里开始，实现你的意图。...grunt.loadNpmTasks：加载完成任务所需的模块。 grunt.registerTask：定义具体的任务。第一个参数为任务名，第二个参数是一个数组， 表示该任务需要依次使用的模块。...==，而不是==和!...同理，csslint 也可作css的语法检查，可以去试试 3）使用 grunt-contrib-watch 插件 watch的使用会自动监听修改，并grunt自动构建 同理，config中增添watch...配置项 files表示要监听的文件，可以是单个值或数组；tasks表示监听有改动后要执行什么任务 watch: { build: { files
注意：grunt-cli并不是grunt工具本身，只是安装了这个工具，而是用来调用和gruntfile.js同一目录的grunt。真正的grunt是安装在项目目录下面的。...grunt-contrib-uglify监听文件变动：grunt-contrib-watch建立本地服务器：grunt-contrib-connect这些插件都是grunt使用过程中最常用的。...uglfy:指的是压缩任务。调用的是grunt-contrib-uglify插件。首先配置了option：banner的配置项。意思是在文件的顶部加上压缩时间。...是不是很酷！...grunt任务一些基本模板上面的事例只能压缩单个文件，如果想要压缩develope文件夹里面的所有js，然后把压缩后的代码放到js文件里面该怎么做呢？很简单！
Grunt 和 Gulp 是在是前端的世界中最流行的解决方案，他们两个都有很多非常有用的插件。NPM（Node.js 的包管理器）则包含了他们两个。...client/external/**/*.coffee' ], }; // 不是所有的任务需要使用 streams // 一个 gulpfile 只是另一个node的程序，所以你可以使用所有 npm...')) .pipe(sourcemaps.write()) .pipe(gulp.dest('build/js')); }); // 监听文件修改 gulp.task('watch',...function() { gulp.watch(paths.scripts, ['scripts']); }); // 默认任务（就是你在命令行输入 `gulp` 时运行） gulp.task(...你可以用 Gulp 调用它，此外有很多转换小工具可以让你更兼容的使用（比如 watchify 提供了一个文件监视器帮助你在开发过程中更加自动化地把文件合并起来），这样会省下很多精力。
//在项目中安装grunt grunt --help //查看更多信息 grunt 安装完毕 新建Gruntfile.js 随便举得例子1： module.exports= function...,'b','c']); }; 我们可以初始化一些数据，这些数据可以用到不同的任务里面 module.exports= function (grunt) { grunt.initConfig({...'index.html', dest:'dist/' } } }); 监听文件 npm install grunt-contrib-watch...--save-dev grunt.loadNpmTasks('grunt-contrib-watch'); watch:{ html:{...：livereload:true 在watch中添加：livereload:true 编译sass npm install grunt-contrib-sass --save-dev
再回到正题上来，gulp.src() 方法正是用来获取流的，但要注意这个流里的内容不是原始的文件流，而是一个虚拟文件对象流（Vinyl files），这个虚拟文件对象中存储着原始文件的路径、文件名、内容等信息.../jquery.js ，而不是 dist/foo.js 要想改变文件名，可以使用插件 gulp-rename 下面说说生成的文件路径与我们给 gulp.dest() 方法传入的路径参数之间的关系。...但是如果某个任务所依赖的任务是异步的，就要注意了，gulp 并不会等待那个所依赖的异步任务完成，而是会接着执行后续的任务。...而是紧接着执行 two 任务。...gulp.watch() gulp.watch() 用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件压缩等。
3.1 gulp.src() 在介绍这个API之前我们首先来说一下Grunt.js和Gulp.js工作方式的一个区别。...Grunt主要是以文件为媒介来运行它的工作流的，比如在Grunt中执行完一项任务后，会把结果写入到一个临时文件中，然后可以在这个临时文件内容的基础上执行其它任务，执行完成后又把结果写入到临时文件中，然后又以这个为基础继续执行其它任务...再回到正题上来，gulp.src()方法正是用来获取流的，但要注意这个流里的内容不是原始的文件流，而是一个虚拟文件对象流(Vinyl files)，这个虚拟文件对象中存储着原始文件的路径、文件名、内容等信息...但是如果某个任务所依赖的任务是异步的，就要注意了，gulp并不会等待那个所依赖的异步任务完成，而是会接着执行后续的任务。...('two is done'); }); 上面的例子中我们执行two任务时，会先执行one任务，但不会去等待one任务中的异步操作完成后再执行two任务，而是紧接着执行two任务。
grunt-parallel 并行运行命令和任务 https://github.com/iammerrick/grunt-parallel grunt-contrib-watch 文件发生改变运行任务...https://github.com/gruntjs/grunt-contrib-watch load-grunt-tasks 使用通配符加载所有任务 https://github.com/sindresorhus.../load-grunt-tasks time-grunt 显示运行任务的执行时间 https://github.com/sindresorhus/time-grunt Gruntfile.js 骨架...增加md5戳，并替换1.html对1.js引用 // grunt-filerev 文件加MD5摘要 // grunt-filerev-replace 替换通过grunt-filerev的文件引用 //...src: '/1.html' } } // 注册任务 grunt.registerInitTask("js-md5", "add md5 for js", ['
npm Scripts 是用定义来一些任务的。我们在命令行中执行 npm run 任务名，即可执行这个命令。...用 npm Scripts 的优势 npm Scripts 中的任务可以调用命令行中的 API。换种说法，所有能在命令行中用的命令都可以在 npm Scripts 中用。...是不是有点小激动~ 例如，删除某个文件夹下的所有文件，可以这么写 "scripts": { "remove": "rm -rf 文件夹路径" } 其中， rm -rf 文件夹路径 为 Unix/linux...之所以用静态服务器而不是直接在文件中打开 .html 文件的原因是：在文件中打开，页面的协议是 file://，如果该页面会在 JS 中加载一些资源或模拟 aJax 接口，其协议是 http:// ，因为协议不同...start:server watch:sass watch:es6", "watch:sass": "compass watch",// 监视 Sass 文件的变化 "watch:es6": "
connect:livereload, watch clean:server gruntjs/grunt-contrib-clean 用于清除文件和文件夹。...watch gruntjs/grunt-contrib-watch 用于监视文件的变化，然后运行指定的任务。...gruntfile 监视 Gruntfile 文件，没有任务。 newer tschaub/grunt-newer 配置任务只对新的文件运行任务。...( 'minify' , [ 'newer:uglify:all' ]); minify 任务只有在 src/**/*.js 中的一个或多个文件比 dest/app.min.js 更新时， uglify...结合 watch 使用时，当 src 中的文件变化时，会使用新的文件运行任务，如： js: { files: [ '/scripts/{,*/}*.js'
全局安装nodemon npm install -g nodemon 在根目录myapp执行监控命令，但要加上html文件监控扩展，比如 nodemon -e html nodemon ....服务器端代码改变了，服务器能够重新编译一次，但客户端还不能自动刷新 这里使用Grunt来构建自动化工作流，nodemon使用grunt-nodemon来启动，然后用grunt-concurrent结合grunt-contrib-watch...install --save-dev grunt-contrib-watch$ npm install --save-dev load-grunt-tasks 配置Gruntfile.js 'use strict...';module.exports = function(grunt) { // 自动加载插件 require('load-grunt-tasks')(grunt); // 显示任务花费时间 require...*/,*/*/,*/*/*/,*/*/*/*/}*.**' ] } } }); //静态服务器任务 grunt.registerTask('serve', ['concurrent']);}; 项目目录结构如下
只要设置好Gruntfile（类比Makefile），就可以使用grunt命令来自动执行javascript代码的清理、重新生成等任务。...在每个nodejs项目中，都有个package.json文件来保存这个项目的名称、版本、依赖库等元数据。 package.json可以使用命令npm init交互式地生成。...在生成该文件后，可以使用npm install在当前项目目录下安装依赖库。 此外，在项目目录下安装工具库并使用--save-dev或--save参数，可以将安装的工具自动加入到该项目的依赖库中。...，是Grunt工具的最主要文件。...如何运行Grunt 在Gruntfile写好之后，运行grunt命令，就会自动执行Gruntfile里面的语句了。so easy 是不是～
在本地运行时，请确保从本地服务器或启用了本地XHR请求的浏览器运行。如果不是，将会收到一条错误消息。...('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-watch'); // 注册自定义任务, 如果有多个任务可以添加到数组中 grunt.regusterTask...('default', ['jshint'])};Grunt 缺点也是配置驱动，当任务非常多的情况下，试图用配置完成所有事简直就是个灾难；再就是它的 I/O 操作也是个弊病，它的每一次任务都需要从磁盘中读取文件...早期需要手动在命令行中输入 jshint test.js，而 Grunt 则通过文件 Gruntfile.js 进行配置Gulp吸取了Grunt的优点，拥有更简便的写法，通过流（Stream）的概念来简化多任务之间的配置和输出...I/O 可以处理多个任务，还是 less 的例子，Gulp 的流程就是：读取 less 文件 -> 编译成 css -> 压缩处理 -> 存储到磁盘在 Grunt 与 Gulp 对比看来还是比较推荐
---- Gulpfile.js 文件 与 Grunt 一样， Gulp 也有一个同名配置文件，叫做 gulpfile.js, 在这个文件里定义需要用到什么插件，执行什么任务，如何执行等等。...Gulp 找到 gulpfile.js 文件，加载依赖的插件，启动默认任务，然后执行我们的 "js" 任务, 你可以看到最终结果 image.png Gulp 还提供了一个名为 watch() 的方法，...这样就可以在文件发生变化时自动执行特定的任务，不必每次修改了文件就要回到命令行手动执行 gulp. gulp.watch('....当然，这行代码通常也要放到某个任务中去运行。 ---- 转到 Gulp.js 在我开始使用 Grunt 之前的几年里，一直是使用 涛哥 开发的 CssGaga 来做前端构建工具。...一看就懂，看一遍就会，不是吗？暂时来说，它的插件数量还没有 Grunt 那么多那么全面，不过日常的前端任务，还是都涵盖了，而且有一些实现得比 Grunt 平台上的更棒。
在我们投入Gulp的学习之前，让我们来讨论一下，为什么你可能希望使用Gulp，而不是其他相似的工具。 为什么选择Gulp？...类似Gulp的工具通常被人称作“构建工具”，因为它们是运行任务来构建网页的工具。两个最流行的构建工具是Gulp和Grunt（Chris 有一篇文章关于学习Grunt）。...现在让我们继续向前，以及学习如何使用Gulp配置一个工作流 我们要配置什么 在看完这篇文章后，你将拥有一个工作流，来进行我们文章开始所说的一些任务： 生成一个Web服务器 当一个文件保存时，浏览器自动刷新...我们希望最终生成的js文件在js文件夹，名为main.min.js.因此标记应为： 在 ""中的标签成'js/main.min.js'. ? useref-html.png 很棒是不是！
好吧，看完后，笔者又整理了一篇关于我们在项目中，使用 glup 的前端文章分享给大家。 gulp 初试用 在用了 Grunt 的一段时间内，越来越觉得自己离不开构建工具。...与 gulp 编译同一套 sass 代码下所花费的时间： 并不是说 Grunt 就比 gulp 不好，也有 gulp 办不到 Grunt 办得到的事情。...在使用了 Grunt 的一段时间后，我发现了 gulp 的运行速度比 Grunt 快很多，于是便从 Grunt 转移阵地到了 gulp。以下的构建思路跟 Grunt 的构建很类似。...└─ gulp/ # gulp 配置目录 ├─ tasks # 任务配置目录 ├─ image.js #...', 'include'], 'watch', cb ); }); 执行 gulp serve 命令，gulp 会执行跟 gulp dev 一样的操作并监听源文件
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
