用gulp实现自己的目录结构

提示:路径中不允许出现中文,否则scss编译会出错,大概。

按照惯例,先检查一下Node.js、npm(cnpm)、gulp的版本号

1.新建package.json

我们可以通过手动新建这个配置文件  也可以通过执行 npm init

package.json是基于nodejs项目必不可少的配置文件,它是存放在项目根目录的普通json文件

2.通过更改package.json来安装各种需要的插件,而我的方案则是

 1 {
 2   "name": "xueweijie",
 3   "version": "1.0.0",
 4   "description": "this is a test",
 5   "main": "gulpfile.js",
 6   "scripts": {
 7     "test": "echo \"Error: no test specified\" && exit 1"
 8   },
 9   "author": "xueweijie&gulp",
10   "license": "ISC",
11   "devDependencies": {  //开发环境   也就是说打包之后还需要用到的插件
12     "gulp": "^3.9.1",
13     "gulp-autoprefixer": "^3.1.1",   //为css自动增加前缀
14     "gulp-cache": "^0.4.5",    //清除缓存
15     "gulp-connect": "^5.0.0"   //浏览器自动刷新
16   },
17   "dependencies": {    //生成环境
18     "gulp-htmlmin": "^3.0.0",   //编译html
19     "gulp-imagemin": "^3.3.0",   //编译images
20     "gulp-minify-css": "^1.2.4",  //编译css
21     "gulp-concat": "^2.6.0",    //按顺序打包js(让多个js生成一个js)
22     "gulp-uglify": "^2.1.2",    //编译js
23     "gulp-file-include": "^0.13.7",   //模板复用
24     "gulp-sass": "^3.1.0"       //编译sass
25   }
26 }

以gulp-cache举例  你也可以通过自己 npm install gulp-cache --save-dev

以gulp-htmlmin举例  你也可以通过 npm install gulp-htmlmin --save

而dev就是让它们在生成环境还是开发环境的区别

注意: 去掉注释!

3.通过 npm install  安装node_modules  (太长就不放了)

 

4.在目录中新建一个gulpfile.js

5.开始配置gulpfile.js

  1 var gulp = require(‘gulp‘);
  2
  3 // 浏览器自动刷新
  4 var connect = require(‘gulp-connect‘);
  5 gulp.task(‘connect‘, function() {
  6     connect.server({
  7         livereload: true
  8     });
  9 });
 10
 11 // 编译html
 12 var htmlmin = require(‘gulp-htmlmin‘);
 13 var    fileinclude = require(‘gulp-file-include‘);
 14 var options = {
 15   removeComments: true, //清除HTML注释
 16   collapseWhitespace: true, //压缩HTML
 17   collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input />
 18   removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
 19   removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
 20   removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
 21   minifyJS: true, //压缩页面JS
 22   minifyCSS: true //压缩页面CSS
 23 };
 24 gulp.task(‘html‘, function () {
 25   return gulp.src(‘./src/html/**/*.html‘)  //生产路径
 26       .pipe(htmlmin(options))   //压缩html
 27     .pipe(fileinclude({     //模板复用
 28         prefix: ‘@@‘,
 29         basepath: ‘@file‘
 30     }))
 31       .pipe(gulp.dest(‘dist/html‘))   //打包路径
 32     .pipe(connect.reload());
 33 });
 34
 35 // 编译css
 36 var cssmin = require(‘gulp-minify-css‘);
 37 var autoprefixer = require(‘gulp-autoprefixer‘);  //自动增加前缀
 38 var sass = require(‘gulp-sass‘);
 39 gulp.task(‘css‘, function () {
 40     return gulp.src(‘src/css/**/*.scss‘)  //生成路径
 41             .pipe(autoprefixer({
 42             browsers: [‘last 2 versions‘, ‘Android >= 4.0‘],
 43             cascade: true, //是否美化属性值 默认:true 像这样:
 44             //-webkit-transform: rotate(45deg);
 45             //        transform: rotate(45deg);
 46             remove:true //是否去掉不必要的前缀 默认:true
 47         }))
 48         .pipe(sass())
 49         .pipe(cssmin({
 50           advanced: false,//类型:Boolean 默认:true [是否开启高级优化(合并选择器等)]
 51           compatibility: ‘*‘,//保留ie7及以下兼容写法 类型:String 默认:‘‘or‘*‘ [启用兼容模式; ‘ie7‘:IE7兼容模式,‘ie8‘:IE8兼容模式,‘*‘:IE9+兼容模式]
 52           keepBreaks: true,//类型:Boolean 默认:false [是否保留换行]
 53           keepSpecialComments: ‘*‘
 54           //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀,如果不加这个参数,有可能将会删除你的部分前缀
 55         }))
 56         .pipe(gulp.dest(‘dist/css‘))
 57             .pipe(connect.reload());
 58 });
 59
 60 // 编译js
 61 var uglify = require(‘gulp-uglify‘);
 62 gulp.task(‘js‘, function () {
 63     return gulp.src(‘src/js/**/*.js‘)  //生产路径
 64         .pipe(uglify({
 65             mangle: {except: [‘require‘ ,‘exports‘ ,‘module‘ ,‘$‘]},
 66           compress: true,//类型:Boolean 默认:true 是否完全压缩
 67           preserveComments: ‘all‘ //保留所有注释
 68         }))
 69         .pipe(gulp.dest(‘dist/js‘))   //打包路径
 70             .pipe(connect.reload());
 71 });
 72
 73 // 编译 images
 74 var imagemin = require(‘gulp-imagemin‘);
 75 var cache = require(‘gulp-cache‘);
 76 gulp.task(‘image‘, function () {
 77     return gulp.src(‘src/images/*.{png,jpg,gif,ico}‘)  //生成路径
 78         .pipe(cache(imagemin({
 79           optimizationLevel: 5, //类型:Number  默认:3  取值范围:0-7(优化等级)
 80           progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片
 81           interlaced: true, //类型:Boolean 默认:false 隔行扫描gif进行渲染
 82           multipass: true //类型:Boolean 默认:false 多次优化svg直到完全优化
 83         })))
 84         .pipe(gulp.dest(‘dist/images‘));  //打包路径
 85 });
 86
 87 // 编译 copy
 88 var concat = require(‘gulp-concat‘);
 89 gulp.task(‘copy‘,  function() {   //静态资源
 90   return gulp.src(‘src/lib/*.js‘)
 91       .pipe(concat(‘all.js‘))        //打包成all.js
 92     .pipe(gulp.dest(‘dist/lib‘))
 93 });
 94
 95 //编译 iconfont
 96 gulp.task(‘iconFont‘,  function() {
 97   return gulp.src(‘src/iconfont/*‘)
 98     .pipe(gulp.dest(‘dist/iconfont‘))
 99 });
100
101 //实时监听
102 gulp.task(‘watch‘, function () {
103
104   gulp.watch([‘./src/html/**/*.html‘], [‘html‘]);
105
106   gulp.watch([‘./src/css/**/*.scss‘], [‘css‘]);
107
108   gulp.watch([‘./src/js/**/*.js‘], [‘js‘]);
109
110 });
111
112 gulp.task(‘default‘, [‘connect‘, ‘watch‘,‘html‘,‘css‘,‘js‘,‘image‘,‘copy‘,‘iconFont‘]);

6.建立src目录,开始搭建目录结构

首先将公共部分的css跟js引入页面,lib为静态资源,通过顺序用上述插件打包成一个js,再以采用一个页面一个css,一个页面一个js的方法进行编写

模板复用这一块通过新建一个后缀名为inc的文件,再在后缀名为html里引入即可,路径要把控好

7.打包上线 gulp 打包  gulp watch  实时监听

dist即为打包之后的项目

从两者之间的大小即可看到效果, 由于我做的image这一块优化不深,推荐一个深度优化图片的网站(免费!!) https://tinypng.com/  这样项目的大小会变得更小一点。

通过gulp watch既可以实时监听,在src里改变了什么,浏览器就可以直接看到。

时间: 2024-10-12 16:53:50

用gulp实现自己的目录结构的相关文章

express+gulp构建项目(一)项目目录结构

express是基于nodejs平台的web框架,它可以让我们快速开发出web引用.而gulp是一种自动构建工具,非常强大,有了它,能帮我们完成很多繁琐的工作,例如,静态文件的压缩,为静态文件加上哈希值的命名以防止缓存等等. 环境安装 若要使用express框架和gulp,首先要安装nodejs环境,因为安装了nodejs环境,才能使用npm包管理器来下载express和gulp. nodejs到官方网站下载即可,现在一般项目中使用4.6的稳定版本. 项目大体结构 从这个图中我们可以很清楚的看出

ionic开发之优化目录结构

当我们来个ionic start circleApp tabs的时候,会自动生成目录结构,基本如下: 显然这不利于项目的管理,当你的项目越来越复杂的时候,这是不够的.我们必须要按照模块进行文件夹的方式去管理 以下为优化后的目录结构 在模板处,我们将其按照模块文件夹的方式去分开管理,每个模块带着自己的控制器走.采用就近原则的管理方式. 当然只要你百度,还有更具备模块化的管理方式,当项目大到一定程度的时候,这种管理方式显然也是不够的,这里不做讨论. 接下来讲讲如何定制化自己的ionic主题样式. i

Laravel5.1 目录结构解析

学习一门框架,首先要了解的就是目录结构.对目录结构清晰就可以着手学习了~这里不作新特性的介绍,权当目录结构手册看吧.若发现有何不恰当的地方请联系我哦~注:写本文时参照的是5.1.4版本 目录或文件 说明 |– app 包含Controller.Model.路由等在内的应用目录,大部分业务将在该目录下进行 | |– Console 命令行程序目录 | | |– Commands 包含了用于命令行执行的类,可在该目录下自定义类 | | |– Kernel.php 命令调用内核文件,包含command

Day4 - 迭代器&amp;生成器、装饰器、Json &amp; pickle 数据序列化、软件目录结构规范

---恢复内容开始--- 本节内容 迭代器&生成器 装饰器 Json & pickle 数据序列化 软件目录结构规范 作业:ATM项目开发 1.列表生成式,迭代器&生成器 列表生成式 需求:列表a = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],要求把列表里的每个值加1 1 a = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 2 b = [] 3 for i in a: 4 b.append(i+1) 5 a = b 6 print(a) 普通青

linux命令格式,获取帮助及其目录结构简要理解

我们都知道,一台计算机要是没通电,和一堆废铁没什么区别.那么,通电开机进入系统后,会进入交互界面,等待用户操作,人与计算机交互界面有两种: GUI:图形用户接口.如我们平时使用的Windows  ,linux的X window,有KDE和GOME. CLI:命令行接口,使用的SHELL类型有bash ,csh,tcshell,zshell等. 例如:[[email protected] ~]# commandbin root:当前登录的用户名. dxlcentOS:当前主机的主机名.@是一个分隔

百度Baidu EFE team的前端规范——项目目录结构规范

项目目录结构规范 简介 该文档主要的设计目标是项目开发的目录结构保持一致,使容易理解并方便构建与管理. 编撰 李玉北.erik.黄后锦.王杨.张立理.赵雷.陈新乐.刘恺华. 本文档由商业运营体系前端技术组审校发布. 要求 在本文档中,使用的关键字会以中文+括号包含的关键字英文表示:必须(MUST).关键字"MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT"

linux 目录结构(转)

原文:http://www.centoscn.com/CentOS/2014/1222/4347.html linux 目录结构 /: 根目录,一般根目录下只存放目录,不要存放文件,/etc./bin./dev./lib./sbin应该和根目录放置在一个分区中/bin:/usr/bin: 可执行二进制文件的目录,如常用的命令ls.tar.mv.cat等./boot: 放置linux系统启动时用到的一些文件./boot/vmlinuz为linux的内核文件,以及/boot/grub.建议单独分区,

Django 工程目录结构

你已经配置好你的Heroku账户(译者注:Heroku是一个老牌的免费云空间),并且创建了第一个Heroku应用,让我们来讨论一个非常重要的话题(虽然经常被忽略):Django工程结构管理. 概述 多数Django工程非常混乱.不幸的是默认的Django工程布局并没有对此有任何帮助,它过于简单对工程的管理导致在处理大的工程时带来很多维护性问题. 本文将帮助让你的工程有个合理的布局.致力于: 遵循最佳实践 让你的工程尽可能地直观--你(作为开发者)可以立即认出代码每个部分的作用 让你工程仍然保持规

vue学习笔记——目录结构介绍(二)

1.初始目录结构如下: 2.目录结构介绍 目录/文件 说明 build 最终发布的代码存放位置. config 配置目录,包括端口号等.我们初学可以使用默认的. node_modules npm 加载的项目依赖模块 src 这里是我们要开发的目录,基本上要做的事情都在这个目录里.里面包含了几个目录及文件: assets: 放置一些图片,如logo等. commponents: 目录里面放了一个组件文件,可以不用. App.vue: 项目入口文件,我们也可以直接将组建写这里,而不使用 commpo