1、新建一个项目文件夹
2、cmd进入项目文件夹下
3、npm init
一路回车,最后yes
根据实际项目填写对应字段的value值
其中：
a、entry point(入口js),默认的是index.js,个人习惯命名为fis3-conf.js，因为在入口JS里等会我们会配置和fis3相关的内容
b、text command:默认的是make text，这里是用来执行一些命令的，呆会会在生成的package.json里，修改对应的配置内容，大概会编写6个命令（start,pre-release,release,del,open,stop），实际使用的只有前三个
c、git repositoy 指的是Github的下载地址，基本没啥用，直接回车
4、修改自动生成的pageage.json的scripts字段的对应的值
"scripts": {
"start": "fis3 release dev && fis3 server start -p 8088 && fis3 release -wL",
"pre-release": "IF EXIST dist rd /s /q dist",
"release": "fis3 release prod -d ./dist -c -f fis3-conf.js && rd /s /q dist\\widget",
"del": "rd /s /q dist\\widget",
"open": "fis3 server open",
"stop": "fis3 server stop && fis3 server clean"
}
说明：dev：开发环境；prod：生产环境
start:发布项目至本地测试服务根目录下；启动内置服务器进行预览，端口号8088；监听页面变化，只要代码更改，就会刷新页面，加快调试开发效率,否则每改一次，就要执行一下fis3 release
pre-release:打包前的准备，如果有dist文件夹就删除；
rd命令是删除文件夹（remove directory）的命令，完整的命令如下：
rd /s/q D:\deldir
/s 表示删除该目录下所有遍历的子目录和文件
/q 删除目录时不提示确认，直接删除
release:构建发布到项目到特定的dist目录下,并且执行fis3-conf.js；删除dist下的widget文件，\是\的转义
fis3 release -h
-h, --help print this help message
-d, --dest <path> release output destination
-l, --lint with lint
-w, --watch monitor the changes of project
-L, --live automatically reload your browser
-c, --clean clean compile cache
-u, --unique use unique compile caching
-r, --root <path> specify project root
-f, --file <filename> specify the file path of `fis-conf.js`
--no-color disable colored output
--verbose enable verbose mode
5、在根目录下安装相应依赖： 安装fis3； 让fis3 产出能够支持相对路径； 静态资源前端加载器，用来分析页面中使用的和依赖的资源（js或css）, 并将这些资源做一定的优化后插入页面中。如把零散的文件合并； 自动给 css 属性添加前缀，让标准的 css3 支持更多的浏览器
npm install fis3
npm install fis3-hook-relative
npm install fis3-postpackager-loader
npm install fis3-preprocessor-autoprefixer
6、新建fis-conf.js文件
// 启用插件
fis.hook('relative');
// =========================dev config=========================
// 开发环境配置配置文件（不需要压缩、合并图片、也不需要 hash。）
fis.media('dev').match('*.{js,css,png}', { // fis.media:分组配置项,用以区分各个环境,环境看package.json的命令
useHash: false,
useSprite: false,
optimizer: null
});
// =========================prod config=========================
fis.media('prod')
.match('**', { // 让所有文件，都使用相对路径，依赖fis3-hook-relative插件
relative: true
})
.match('**.{css,less,scss}', {//自动给 css 属性添加前缀，让标准的 css3 支持更多的浏览器.
preprocessor: fis.plugin('autoprefixer', {
"browsers": ["Android >= 2.1", "iOS >= 4", "ie >= 8", "firefox >= 15"],
"cascade": true
}),
optimizer: fis.plugin('clean-css'),
packTo: '/static/css/rop.css'//将所有css文件合并为一个文件
})
.match('::package', {
postpackager: fis.plugin('loader', {//基于整个项目打包,一个页面最终只会引入一个 css
allInOne: true
})
})
.match('/static/*/*.{js,css}', {
isMod: false
})
.match('**.png', {// fis-optimizer-png-compressor 插件进行压缩，已内置
optimizer: fis.plugin('png-compressor')
})
.match('/static/js/*.js', { // 压缩js
packTo: '/static/js/all.js'
})
.match('**.js', { // 压缩js
optimizer: fis.plugin('uglify-js',{
compress: {
drop_console: true // 自动过滤js里的打印日志
}
})
});
// 某些资源从构建中去除
fis.set('project.ignore', [
'dist/**',
'node_modules/**',
'widget/**',
'static/js/daterangepicker.js',
'static/js/interactive.js',
'fis3-conf.js',
'*.json',
'README.md'
]);
以下是项目目录的个人习惯 1、dist:命令打包生成的文件名 2、node_modules:npm install生成的 3、page:静态页面的总文件夹，有很多个子文件夹，每个子文件夹下有个index.html对应一个静态页面 4、static:静态资源的文件，有css,images(存放前景图，就是用img标签引用的图),js；css文件夹下还会建一个images文件夹，它是用来存放背景图的，只有icon.psd和icon.png（雪碧图） 5、widget:小组件的总文件夹，有多个子文件夹，每个子文件夹下有对应的html和css文件 6、README.md：项目的相关注意事项
