var gulp = require('gulp'); // 引入组件 var less = require('gulp-less'), // less minifycss = require('gulp-minify-css'), // CSS压缩 uglify = require('gulp-uglify'), // js压缩 concat = require('gulp-concat'), // 合并文件 rename = require('gulp-rename'), // 重命名 clean = require('gulp-clean'); //清空文件夹 // less解析 gulp.task('build-less', function(){ gulp.src('./javis/static/less/lib/s-production.less') .pipe(less()) .pipe(gulp.dest('./javis/static/build/css/lib/')) gulp.src('./javis/static/less/lib/s-skins.less') .pipe(less()) .pipe(gulp.dest('./javis/static/build/css/lib/')) gulp.src('./javis/static/less/lib/s/s.less') .pipe(less()) .pipe(gulp.dest('./javis/static/build/css/lib/')) gulp.src('./javis/static/less/*.less') .pipe(less()) .pipe(gulp.dest('./javis/static/build/css/')) }); // 合并、压缩、重命名css gulp.task('stylesheets',['build-less'], function() { // 注意这里通过数组的方式写入两个地址,仔细看第一个地址是css目录下的全部css文件,第二个地址是css目录下的areaMap.css文件,但是它前面加了!,这个和.gitignore的写法类似,就是排除掉这个文件. gulp.src(['./javis/static/build/css/*.css','!./javis/static/build/css/areaMap.css']) .pipe(concat('all.css')) .pipe(gulp.dest('./javis/static/build/css/')) .pipe(rename({ suffix: '.min' })) .pipe(minifycss()) .pipe(gulp.dest('./javis/static/build/css')); }); // 合并,压缩js文件 gulp.task('javascripts', function() { gulp.src('./javis/static/js/*.js') .pipe(concat('all.js')) .pipe(gulp.dest('./javis/static/build/js')) .pipe(rename({ suffix: '.min' })) .pipe(uglify()) .pipe(gulp.dest('./javis/static/build/js')); }); // 清空图片、样式、js gulp.task('clean', function() { return gulp.src(['./javis/static/build/css/all.css','./javis/static/build/css/all.min.css'], {read: false}) .pipe(clean({force: true})); }); // 将bower的库文件对应到指定位置 gulp.task('buildlib',function(){ gulp.src('./bower_components/angular/angular.min.js') .pipe(gulp.dest('./javis/static/build/js/')) gulp.src('./bower_components/angular/angular.js') .pipe(gulp.dest('./javis/static/build/js/')) gulp.src('./bower_components/bootstrap/dist/js/bootstrap.min.js') .pipe(gulp.dest('./javis/static/build/js/')) gulp.src('./bower_components/jquery/dist/jquery.min.js') .pipe(gulp.dest('./javis/static/build/js/')) gulp.src('./bower_components/angular-route/angular-route.min.js') .pipe(gulp.dest('./javis/static/build/js/')) gulp.src('./bower_components/angular-animate/angular-animate.min.js') .pipe(gulp.dest('./javis/static/build/js/')) gulp.src('./bower_components/angular-bootstrap/ui-bootstrap.min.js') .pipe(gulp.dest('./javis/static/build/js/')) gulp.src('./bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js') .pipe(gulp.dest('./javis/static/build/js/')) //--------------------------css------------------------------------- gulp.src('./javis/static/less/fonts/*') .pipe(gulp.dest('./javis/static/build/css/fonts/')) gulp.src('./bower_components/bootstrap/fonts/*') .pipe(gulp.dest('./javis/static/build/css/fonts/')) gulp.src('./bower_components/bootstrap/dist/css/bootstrap.min.css') .pipe(gulp.dest('./javis/static/build/css/lib')) }); // 定义develop任务在日常开发中使用 gulp.task('develop',function(){ gulp.run('buildlib','build-less','javascripts','stylesheets'); gulp.watch('./javis/static/less/*.less', ['build-less']); }); // 定义一个prod任务作为发布或者运行时使用 gulp.task('prod',function(){ gulp.run('buildlib','build-less','stylesheets','javascripts'); // 监听.less文件,一旦有变化,立刻调用build-less任务执行 gulp.watch('./javis/static/less/*.less', ['build-less']); }); // gulp命令默认启动的就是default认为,这里将clean任务作为依赖,也就是先执行一次clean任务,流程再继续. gulp.task('default',['clean'], function() { gulp.run('develop'); });
相关推荐
精通 gulp 常用插件
前端构建工具gulp使用教程(二)、常用gulp插件以及gulp使用完整实例-附件资源
定义指令三、gulp常用插件四、gulp常用项目流程操作及部分插件使用方法 一、gulp简介 gulp 是一个基于node的自动化打包构建工具,前端开发者可以使用它来处理常见任务: 搭建web服务器; 文件保存时自动重载浏览器...
一个实用的Gulp插件,当将使用时,可以从删除未使用的图标。 FontAwesome 5中包含JavaScript文件可以使捆绑包大小增加约900kb(如果可以访问Pro版本,甚至可以增加> 2.5MB)。 仅包含所需的图标会导致尺寸大幅减少...
这个gulp插件将带有模板的html文件转换为js文件,该js文件包含一个以所有模板为字符串的对象。 在结构化HTML文件中编写模板比在一行javascript字符串中编写实用得多。 因此,此插件将带有模板HTML文件转换为js对象...
gulp常用地址: gulp官方网址: gulp插件地址: gulp 官方API: gulp 中文API: 在学习前,先谈谈大致使用gulp的步骤,给读者以初步的认识。首先当然是安装nodejs,通过nodejs的npm全局安装和项目安装gulp,其次在...
gulp demo 测试 安装,在根目录下,执行以下命令,安装相关依赖包 CLI命令 cnpm install 运行项目 CLI命令 npm start 开启开发环境调试模式,服务根目录src/ npm run pro 开启生产环境调试模式,服务根目录build/...
通过 npm npm install gulp-onejs-build --save-dev安装插件 将它添加到你的 gulpfile.js 并注册所有的 gulp 任务 var gulp = require ( 'gulp' ) ; var karma = require ( 'karma' ) . server ; var oneJsBuild = ...
Gulp4 +基本插件和实用程序 警告Gulp 4+:在撰写本文时,Gulp 4尚未发布稳定版本,此软件包在此之前不会发布稳定版本。 在认为Gulp 4稳定之前,该程序包将保持在“ alpha”发行版中。 今天如何安装Gulp 4! # ...
Gulp是一款自动构建工具,需要在Node.js的环境下运行,常用的API方法并不多,很快就能熟记,用到的大部分功能都是依靠插件来完成的。 安装: 安装全局gulp:npm i gulp -g 在磁盘上创建新文件夹,用来表示当前项目...
有用的NPM软件包有用的NPM软件包,您可以在下一个项目中使用它:)Gulp.js软件包包装描述 Gulp的命令行实用程序Gulp插件,用于编译SassGulp插件使您可以将Pug模板编译为HTML或JS Gulp插件,用于连接文件 Gulp插件为...
这是Fractal ( )的gulp插件实用程序包。 var gutil = require('gulp-util') 我正在使用.log方法记录此工作流中的错误情况。 ### gulpjs / gulp-coffee #### src: : 这是Fractal ( )编写的coffeescript...
npm上有很多不错的gulp插件和实用程序,因此,各种需求所需的大多数静态资源转换/转换/捆绑都可以通过现有的插件和模块来完成。 您可以利用这些丰富的生态系统来构建满足您特定需求的静态站点生成器,并可以自动化...
该模块提供了两个实用程序方法getMd5Value(file)和getMd5Promise(file) ,插件作者可以将其用作提取MD5哈希的常用方法。 它还提供了一个gulp插件,可以在流中的较早位置缓存MD5哈希。 两种实用程序方法都不需要...
–使用JS插件转换样式的工具。Javascript(ES6) –捆绑所有依赖项。 –用于编写下一代JavaScript的编译器。 –用于JavaScript和JSX的可插入的实用程序。 – JavaScript解析器,压缩器,压缩器或美化器工具箱。杂 ...
WordPress 一个干净的 Wordpress 核心从 wp-content 目录中分离出来一个新的 wp-config.php 文件常用插件重力形式优步菜单构建工具鲍尔波旁酒整洁的吞咽德尔自动前缀缓存连接htmlmin 图像最小jshint 重新加载缩小CSS...
Angular 延迟加载模块示例应用程序 这个示例项目演示了如何在 Angular 应用程序中...###Ensure 节点工具和 gulp 插件是最新的: $ npm install 将安装package.json文件中定义的依赖项 确保前端依赖项已安装或最新:
然后全局安装gulp: $ npm install -g gulp接下来,在每个样本的目录内,从每个样本的目录内运行以下命令以安装所有依赖项: $ npm installl这应该安装gulp和几个gulp插件。 之后,可以在命令中使用gulp $ gulp这会...
强类型的 TypeScript 开发体验和维护项目上相比 JavaScript ...基于 gulp 搭建开发编译环境,gulp-typescript 插件用于编译 typescript 文件, gulp-nodemon 则可以监控文件内容的变更,自动编译和重启node服务,提升